mautourco-components 0.2.19 → 0.2.21

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

@@ -0,0 +1,28 @@
+import { IconName } from '@/src/components/atoms/Icon/Icon';
+import { cn } from '@/src/lib/utils';
+import React from 'react';
+import { ServiceTitle } from '../../ServiceTitle/ServiceTitle';
+import './CancellationLayout.css';
+
+export interface CancellationLayoutProps {
+  title: React.ReactNode;
+  icon: IconName;
+  children?: React.ReactNode;
+  className?: string;
+  image: string;
+}
+
+export const CancellationLayout: React.FC<CancellationLayoutProps> = (props) => {
+  const { title, icon, children, className, image } = props;
+  return (
+    <div className={cn('cancellation-layout', className)}>
+      <ServiceTitle title={title} icon={icon} />
+      <div className="cancellation-layout__content">
+        <div className="cancellation-layout__content-left">{children}</div>
+        <figure className="cancellation-layout__content-right">
+          <img src={image} alt={title?.toString() || ''} width={150} height={200} />
+        </figure>
+      </div>
+    </div>
+  );
+};

package/src/components/molecules/DialogContentPolicy/DialogCancellationAccom.tsx

@@ -0,0 +1,65 @@
+import useStays from '@/src/hooks/useStays';
+import { RoomItem } from '@/src/types/table';
+import { Fragment } from 'react';
+import Chip from '../../atoms/Chip/Chip';
+import { Text } from '../../atoms/Typography/Typography';
+import { DateDisplay } from '../DateDisplay/DateDisplay';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+import { CancellationLayout } from './CancellationLayout/CancellationLayout';
+
+export interface DialogCancellationAccomProps {
+  image: string;
+  hotelName: string;
+  dates: string[];
+  rooms: RoomItem[];
+}
+
+export const DialogCancellationAccom: React.FC<DialogCancellationAccomProps> = (
+  props
+) => {
+  const { image, hotelName, dates, rooms } = props;
+  const stay = useStays(dates);
+
+  return (
+    <CancellationLayout title="Accommodation" icon="accom" image={image}>
+      <div className="space-y-6">
+        <div className="space-y-1">
+          <Text variant="bold">{hotelName}</Text>
+          <DateDisplay dates={dates} />
+          <TextWithIcon icon="night" textLeading="4">
+            {stay} Nights
+          </TextWithIcon>
+        </div>
+        <div className="">
+          {rooms.map((room, index) => (
+            <div key={`rm-${index}`} className="space-y-4">
+              <div className="space-y-1">
+                <TextWithIcon icon="accom" textLeading="4">
+                  {index + 1} Room
+                </TextWithIcon>
+                <Text size="sm">{room.RoomName}</Text>
+              </div>
+              {room.cancellation_policy.map((policy) => (
+                <Fragment key={`policy-${index}`}>
+                  <Chip type="outline" color="brand" isBlackText>
+                    Policy period applies{' '}
+                    <DateDisplay
+                      dates={[policy.ValidFrom, policy.ValidTo]}
+                      textSize="xs"
+                    />
+                  </Chip>
+                  <Text variant="bold" size="xs" leading="4">
+                    {policy.Value} % of total price
+                  </Text>
+                  <Text size="xs" leading="4">
+                    {policy.Description}
+                  </Text>
+                </Fragment>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </CancellationLayout>
+  );
+};

package/src/components/molecules/DialogContentPolicy/DialogCancellationExcursion.tsx

@@ -0,0 +1,59 @@
+import { Text } from '../../atoms/Typography/Typography';
+import { DateDisplay } from '../DateDisplay/DateDisplay';
+import { ServiceInfo } from '../ServiceInfo/ServiceInfo';
+import { CancellationLayout } from './CancellationLayout/CancellationLayout';
+
+export interface DialogCancellationExcursionProps {
+  image: string;
+  excursionName: string;
+  date: string;
+  policy: {
+    title: string;
+    description: string;
+  };
+  details: {
+    duration: string;
+    meal: string;
+    accessibility: string;
+    transferType: string;
+  };
+}
+
+export const DialogCancellationExcursion: React.FC<DialogCancellationExcursionProps> = (
+  props
+) => {
+  const { image, excursionName, date, details, policy } = props;
+
+  return (
+    <CancellationLayout title="Excursion" icon="map" image={image}>
+      <div className="space-y-6">
+        <div className="space-y-1">
+          <Text variant="bold">{excursionName}</Text>
+          <DateDisplay dates={[date]} />
+        </div>
+        <ServiceInfo>
+          <ServiceInfo.Item icon="stopwatch" label="Duration">
+            {details.duration}
+          </ServiceInfo.Item>
+          <ServiceInfo.Item icon="utensils" label="Meal">
+            {details.meal}
+          </ServiceInfo.Item>
+          <ServiceInfo.Item icon="bike" label="Difficulty">
+            {details.accessibility}
+          </ServiceInfo.Item>
+          <ServiceInfo.Item icon="car" label="Transfer Type">
+            {details.transferType}
+          </ServiceInfo.Item>
+        </ServiceInfo>
+        <div className="">
+          <Text variant="bold" size="xs" leading="4">
+            {policy.title}
+          </Text>
+          <Text size="xs" leading="4">
+            {policy.description}
+          </Text>
+        </div>
+      </div>
+    </CancellationLayout>
+  );
+};

package/src/components/molecules/DialogContentPolicy/DialogCancellationList.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  DialogCancellationAccom,
+  DialogCancellationAccomProps,
+} from './DialogCancellationAccom';
+import {
+  DialogCancellationExcursion,
+  DialogCancellationExcursionProps,
+} from './DialogCancellationExcursion';
+import { DialogContentPolicy } from './DialogContentPolicy';
+
+export interface CancellationItem {
+  type: 'accommodation' | 'excursion';
+  data: DialogCancellationAccomProps | DialogCancellationExcursionProps;
+}
+
+export interface DialogCancellationListProps {
+  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 isExcursion = (
+    data: CancellationItem['data']
+  ): data is DialogCancellationExcursionProps => {
+    return 'excursionName' in data;
+  };
+
+  return (
+    <DialogContentPolicy>
+      {cancellations.map((c, index) => {
+        if (c.type === 'accommodation' && isAccommodation(c.data)) {
+          return <DialogCancellationAccom key={`acc-${index}`} {...c.data} />;
+        }
+        if (c.type === 'excursion' && isExcursion(c.data)) {
+          return <DialogCancellationExcursion key={`exc-${index}`} {...c.data} />;
+        }
+        return null;
+      })}
+    </DialogContentPolicy>
+  );
+};

package/src/components/molecules/DialogContentPolicy/DialogContentPolicy.tsx

@@ -0,0 +1,45 @@
+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 { DialogCancellationAccom } from './DialogCancellationAccom';
+import { DialogCancellationExcursion } from './DialogCancellationExcursion';
+import { DialogCancellationList } from './DialogCancellationList';
+
+export interface DialogContentPolicyProps {
+  children: React.ReactNode;
+  onSubmit?: () => void;
+}
+
+export const DialogContentPolicy = (props: DialogContentPolicyProps) => {
+  const { children, onSubmit } = props;
+  const [accepted, setAccepted] = useState<CheckedState>(false);
+
+  return (
+    <div className="cancellation-policy">
+      {children}
+      <div className="flex justify-end gap-x-8 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} />
+        </div>
+        <Button
+          className="w-[250px]"
+          variant="secondary"
+          disabled={!accepted}
+          onClick={onSubmit}>
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+DialogContentPolicy.Accommodation = DialogCancellationAccom;
+DialogContentPolicy.Excursion = DialogCancellationExcursion;
+DialogContentPolicy.List = DialogCancellationList;

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

@@ -0,0 +1,5 @@
+export * from './DialogContentPolicy';
+
+export type { CancellationLayoutProps } from './CancellationLayout/CancellationLayout';
+export type { DialogCancellationAccomProps } from './DialogCancellationAccom';
+export type { DialogCancellationExcursionProps } from './DialogCancellationExcursion';

package/src/components/molecules/ServiceTitle/ServiceTitle.css

@@ -1,5 +1,5 @@
 .service-title {
-  @apply relative;
+  @apply relative flex gap-x-2 items-center;
   padding-left: 10px;
   &::before {
     content: '';

package/src/components/molecules/ServiceTitle/ServiceTitle.tsx

@@ -1,19 +1,37 @@
 import React from 'react';
+import Icon, { IconName } from '../../atoms/Icon/Icon';
+import { IconBaseProps } from '../../atoms/Icon/icons/registry';
 import { Text, TextProps } from '../../atoms/Typography/Typography';
 import './ServiceTitle.css';
 
 export interface ServiceTitleProps {
-  title: string;
+  title: React.ReactNode;
   textSize?: TextProps['size'];
+  textLeading?: TextProps['leading'];
+  textVariant?: TextProps['variant'];
+  icon?: IconName;
+  iconSize?: IconBaseProps['size'];
 }
 
 export const ServiceTitle: React.FC<ServiceTitleProps> = (props) => {
-  const { title, textSize = 'md' } = props;
+  const {
+    title,
+    textSize = 'md',
+    icon,
+    iconSize = 'sm',
+    textLeading = '5',
+    textVariant = 'bold',
+  } = props;
   return (
-    <div className="service-title">
-      <Text variant="bold" size={textSize} color="accent">
-        {title}
-      </Text>
-    </div>
+    <Text
+      className="service-title"
+      size={textSize}
+      variant={textVariant}
+      leading={textLeading}
+      as="div"
+      color="accent">
+      {icon && <Icon name={icon} size={iconSize} />}
+      <span>{title}</span>
+    </Text>
   );
 };

package/src/components/organisms/Booking/Booking.tsx

@@ -2,6 +2,8 @@ import { cn } from '@/src/lib/utils';
 import React from 'react';
 import './Booking.css';
 import { BookingDocket } from './BookingDocket/BookingDocket';
+import { BookingHeader } from './BookingHeader';
+import { BookingPaxList } from './BookingPaxList';
 import { BookingStep } from './BookingStep/BookingStep';
 
 export interface BookingProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -19,3 +21,5 @@ export default function Booking(props: BookingProps) {
 
 Booking.Docket = BookingDocket;
 Booking.Step = BookingStep;
+Booking.Header = BookingHeader;
+Booking.PaxList = BookingPaxList;

package/src/components/organisms/Booking/BookingHeader.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Heading, Text } from '../../atoms/Typography/Typography';
+
+export interface BookingHeaderProps {
+  fileNumber: string | number;
+  reference: string | number;
+  location: string;
+  isBooking?: boolean;
+}
+
+export const BookingHeader: React.FC<BookingHeaderProps> = (props) => {
+  const { fileNumber, reference, isBooking, location } = props;
+  return (
+    <div className="space-y-2">
+      <Text color="light">File number: {fileNumber}</Text>
+      <Heading level={6} as="h1" color="brand">
+        {isBooking ? 'Booking' : 'Quotation'}: N° {reference}
+      </Heading>
+      <Text color="accent" size="xl">
+        {location}
+      </Text>
+    </div>
+  );
+};

package/src/components/organisms/Booking/BookingPaxList.tsx

@@ -0,0 +1,224 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  BookingPax,
+  BookingPaxAccomProps,
+  BookingPaxExcursionProps,
+  BookingPaxTransferProps,
+} from '../../molecules/BookingPax';
+import {
+  BookingPaxClientInfo,
+  BookingPaxClientOptions,
+} from '../../molecules/BookingPax/BookingPaxClient/BookingPaxClient';
+
+export interface BookingPaxData {
+  type: 'accommodation' | 'excursion' | 'transfer';
+  data:
+    | Omit<BookingPaxAccomProps, 'clientsInfo'>
+    | Omit<BookingPaxExcursionProps, 'clientsInfo'>
+    | Omit<BookingPaxTransferProps, 'clientsInfo'>;
+}
+
+export interface BookingPaxAutoFilledData {
+  type: BookingPaxData['type'];
+  parentIndex: number;
+  roomIndex?: number;
+  selectedClients: BookingPaxClientInfo[];
+}
+
+export interface BookingPaxProps {
+  data: BookingPaxData[];
+  clientsInfo: BookingPaxClientInfo[];
+  isSubmitted?: boolean;
+  onPaxChange?: (
+    index: number,
+    type: BookingPaxData['type'],
+    options: BookingPaxClientOptions
+  ) => void;
+  onRemarkChange?: (index: number, type: BookingPaxData['type'], value: string) => void;
+  onError?: (index: number, type: BookingPaxData['type'], hasError: boolean) => void;
+  onTimeChange?: (index: number, value: string | string[]) => void;
+  onFlightNumberChange?: (index: number, value: string) => void;
+  onAutoFilled?: (data: BookingPaxAutoFilledData[]) => void;
+}
+
+// Type guards for better type safety
+const isAccommodationData = (
+  data: BookingPaxData['data']
+): data is BookingPaxAccomProps => {
+  return 'rooms' in data && 'hotelName' in data && 'roomName' in data;
+};
+
+const isExcursionData = (
+  data: BookingPaxData['data']
+): data is BookingPaxExcursionProps => {
+  return 'name' in data && 'type' in data && !('from' in data);
+};
+
+const isTransferData = (
+  data: BookingPaxData['data']
+): data is BookingPaxTransferProps => {
+  return 'from' in data && 'to' in data && 'type' in data;
+};
+
+export const BookingPaxList: React.FC<BookingPaxProps> = (props) => {
+  const {
+    data,
+    isSubmitted,
+    clientsInfo,
+    onPaxChange,
+    onRemarkChange,
+    onError,
+    onTimeChange,
+    onFlightNumberChange,
+    onAutoFilled,
+  } = props;
+
+  const [autoFilledData, setAutoFilledData] = useState<
+    {
+      type: BookingPaxData['type'];
+      parentIndex: number;
+      roomIndex?: number;
+      selectedClients: BookingPaxClientInfo[];
+    }[]
+  >([]);
+
+  // Memoized callback handlers to reduce re-renders
+  const handlePaxChange = useCallback(
+    (type: BookingPaxData['type'], index: number, options: BookingPaxClientOptions) => {
+      onPaxChange?.(index, type, options);
+    },
+    [onPaxChange]
+  );
+
+  const handleRemarkChange = useCallback(
+    (type: BookingPaxData['type'], index: number, value: string) => {
+      onRemarkChange?.(index, type, value);
+    },
+    [onRemarkChange]
+  );
+
+  const handleError = useCallback(
+    (index: number, type: BookingPaxData['type'], hasError: boolean) => {
+      onError?.(index, type, hasError);
+    },
+    [onError]
+  );
+
+  const handleTimeChange = useCallback(
+    (value: string | string[], index: number) => {
+      // Don't need type because only transfer has this callback
+      onTimeChange?.(index, value);
+    },
+    [onTimeChange]
+  );
+
+  const handleFlightNumberChange = useCallback(
+    (value: string, index: number) => {
+      // Don't need type because only transfer has this callback
+      onFlightNumberChange?.(index, value);
+    },
+    [onFlightNumberChange]
+  );
+
+  const handleAutoFilled = useCallback((type: BookingPaxData['type']) => {
+    return (paxCount: number, index: number, roomIndex?: number) => {
+      if (paxCount === clientsInfo.length) {
+        setAutoFilledData((prev) => {
+          const findParentIndex = prev.find((d) => d.parentIndex === index);
+          if (findParentIndex) {
+            return prev;
+          }
+          return [
+            ...prev,
+            {
+              type,
+              parentIndex: index,
+              selectedClients: clientsInfo,
+              roomIndex,
+            },
+          ];
+        });
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    data.forEach((item, index) => {
+      const { type, data: itemData } = item;
+      if (type === 'accommodation' && isAccommodationData(itemData)) {
+        const initAccom = handleAutoFilled('accommodation');
+        // if(itemData.clientsInfo.length === itemData)
+        itemData.rooms.forEach((room, roomIndex) => {
+          initAccom(room.paxCount, index, roomIndex);
+        });
+      } else if (type === 'excursion' && isExcursionData(itemData)) {
+        const initExcursion = handleAutoFilled('excursion');
+        initExcursion(itemData.paxCount, index);
+      } else if (type === 'transfer' && isTransferData(itemData)) {
+        const initTransfer = handleAutoFilled('transfer');
+        initTransfer(itemData.paxCount, index);
+      }
+    });
+  }, [data, handleAutoFilled]);
+
+  useEffect(() => {
+    onAutoFilled?.(autoFilledData);
+  }, [autoFilledData, onAutoFilled]);
+
+  return (
+    <BookingPax>
+      {data.map((item, index) => {
+        const { type, data: itemData } = item;
+
+        const callbacks = {
+          onPaxChange: (options: BookingPaxClientOptions) =>
+            handlePaxChange(type, index, options),
+          onRemarkChange: (value: string) => handleRemarkChange(type, index, value),
+        };
+
+        if (type === 'accommodation' && isAccommodationData(itemData)) {
+          return (
+            <BookingPax.Accom
+              key={`bp-accom-${index}`}
+              {...itemData}
+              {...callbacks}
+              clientsInfo={clientsInfo}
+              isSubmitted={isSubmitted}
+              onError={(roomIndex, hasError) => handleError(roomIndex, type, hasError)}
+            />
+          );
+        }
+
+        if (type === 'excursion' && isExcursionData(itemData)) {
+          return (
+            <BookingPax.Excursion
+              key={`bp-excursion-${index}`}
+              {...itemData}
+              clientsInfo={clientsInfo}
+              isSubmitted={isSubmitted}
+              onError={(hasError) => handleError(index, type, hasError)}
+              {...callbacks}
+            />
+          );
+        }
+
+        if (type === 'transfer' && isTransferData(itemData)) {
+          return (
+            <BookingPax.Transfer
+              key={`bp-transfer-${index}`}
+              {...itemData}
+              onTimeChange={(value) => handleTimeChange(value, index)}
+              onFlightNumberChange={(value) => handleFlightNumberChange(value, index)}
+              clientsInfo={clientsInfo}
+              isSubmitted={isSubmitted}
+              onError={(hasError) => handleError(index, type, hasError)}
+              {...callbacks}
+            />
+          );
+        }
+
+        return null;
+      })}
+    </BookingPax>
+  );
+};

package/src/components/organisms/Booking/BookingStep/BookingStep.tsx

@@ -3,11 +3,12 @@ import {
   StepperTimeline,
   StepperTimelineItem,
 } from '@/src/components/molecules/StepperTimeline/StepperTimeline';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import './BookingStep.css';
 
 export interface BookingStepProps {
   steps: StepperTimelineItem[];
+  currentStep?: number;
   className?: string;
   nextDisabled?: boolean;
   onStepChange?: (step: StepperTimelineItem, index: number) => void;
@@ -15,7 +16,8 @@ export interface BookingStepProps {
 }
 
 export const BookingStep: React.FC<BookingStepProps> = (props) => {
-  const { steps, className, nextDisabled, onStepChange, onNextClick } = props;
+  const { steps, className, nextDisabled, currentStep, onStepChange, onNextClick } =
+    props;
 
   const [currentIndex, setCurrentIndex] = useState<number>(0);
 
@@ -30,6 +32,10 @@ export const BookingStep: React.FC<BookingStepProps> = (props) => {
     onNextClick?.(steps[currentStep], currentStep);
   };
 
+  useEffect(() => {
+    setCurrentIndex(currentStep ? currentStep - 1 : 0);
+  }, [currentStep]);
+
   return (
     <div className="booking-step">
       <StepperTimeline