mautourco-components 0.2.18 → 0.2.20

package/src/components/molecules/BookingResume/ResumeAccom/ResumeAccom.tsx

@@ -0,0 +1,63 @@
+import useStays from '@/src/hooks/useStays';
+import { RoomItem } from '@/src/types/table';
+import { BookingPax } from '@/src/types/table/booking.types';
+import React from 'react';
+import { Text } from '../../../atoms/Typography/Typography';
+import { DateDisplay } from '../../DateDisplay/DateDisplay';
+import { PaxDisplay } from '../../PaxDisplay/PaxDisplay';
+import { ServiceInfo } from '../../ServiceInfo/ServiceInfo';
+import { ServiceTitle } from '../../ServiceTitle/ServiceTitle';
+import TextWithIcon from '../../TextWithIcon/TextWithIcon';
+import { BookingResumeLayout } from '../BookingResumeLayout/BookingResumeLayout';
+import './ResumeAccom.css';
+
+export interface ResumeAccomProps {
+  image: string;
+  dates: string[];
+  clientType: string;
+  pax: BookingPax;
+  hotelName: string;
+  rooms: Partial<RoomItem>[];
+}
+
+export const ResumeAccom: React.FC<ResumeAccomProps> = (props) => {
+  const { image, dates, clientType, pax, rooms, hotelName } = props;
+
+  const stay = useStays(dates);
+
+  return (
+    <BookingResumeLayout
+      title="Accommodation"
+      icon="accom"
+      image={image}
+      className="resume-accom">
+      <ServiceTitle title={hotelName} />
+      <div className="space-y-2 mt-4">
+        <DateDisplay dates={dates} textColor="accent" />
+        <TextWithIcon icon="night">{stay} Nights</TextWithIcon>
+        <Text variant="medium" size="sm" leading="4">
+          <strong>Client types:</strong> {clientType}
+        </Text>
+        <PaxDisplay pax={pax} />
+        <div>
+          {rooms.map((room, index) => (
+            <div key={`rm-${index}`} className="space-y-1">
+              <TextWithIcon icon="accom" textSize="sm" textVariant="medium">
+                {room.RoomName}
+              </TextWithIcon>
+              <ServiceInfo.Item
+                icon="utensils"
+                iconSize="sm"
+                textSize="sm"
+                textLeading="4"
+                textVariant="medium"
+                label="Meal-Plan">
+                {room.MealPlan}
+              </ServiceInfo.Item>
+            </div>
+          ))}
+        </div>
+      </div>
+    </BookingResumeLayout>
+  );
+};

package/src/components/molecules/BookingResume/ResumeExcursion/ResumeExcursion.css

@@ -0,0 +1,5 @@
+.resume-excursion {
+  .service-info__item-label {
+    flex: 0 0 108px;
+  }
+}

package/src/components/molecules/BookingResume/ResumeExcursion/ResumeExcursion.tsx

@@ -0,0 +1,75 @@
+import { BookingPax } from '@/src/types/table/booking.types';
+import React from 'react';
+import { Text } from '../../../atoms/Typography/Typography';
+import { DateDisplay } from '../../DateDisplay/DateDisplay';
+import { PaxDisplay } from '../../PaxDisplay/PaxDisplay';
+import { ServiceInfo } from '../../ServiceInfo/ServiceInfo';
+import TextWithIcon from '../../TextWithIcon/TextWithIcon';
+import { BookingResumeLayout } from '../BookingResumeLayout/BookingResumeLayout';
+import './ResumeExcursion.css';
+
+export interface ResumeExcursionProps {
+  image: string;
+  date: string;
+  pax: BookingPax;
+  pickUpPoint: string;
+  duration: string;
+  meal: string;
+  accessibility: string;
+  transferType: string;
+  type: 'sea' | 'land' | 'catamaran';
+}
+
+const mapType: Record<ResumeExcursionProps['type'], string> = {
+  sea: 'Sea excursion',
+  land: 'Land excursion',
+  catamaran: 'Cruise excursion',
+};
+
+export const ResumeExcursion: React.FC<ResumeExcursionProps> = (props) => {
+  const {
+    image,
+    date,
+    pax,
+    pickUpPoint,
+    duration,
+    meal,
+    accessibility,
+    transferType,
+    type,
+  } = props;
+  return (
+    <BookingResumeLayout
+      title="Excursion"
+      icon="map"
+      image={image}
+      className="resume-excursion">
+      <div className="space-y-3">
+        <DateDisplay dates={[date]} textColor="accent" />
+        <div className="space-y-1">
+          <TextWithIcon icon={type} textSize="sm" textVariant="medium">
+            {mapType[type]}
+          </TextWithIcon>
+          <Text variant="medium" size="sm" leading="4">
+            <strong>Pickup: </strong> {pickUpPoint}
+          </Text>
+        </div>
+        <PaxDisplay pax={pax} />
+        <ServiceInfo className="space-y-1" contentTextVariant="regular">
+          <ServiceInfo.Item icon="stopwatch" label="Duration">
+            {duration}
+          </ServiceInfo.Item>
+          <ServiceInfo.Item icon="utensils" label="Meal">
+            {meal}
+          </ServiceInfo.Item>
+          <ServiceInfo.Item icon="bike" label="Difficulty">
+            {accessibility}
+          </ServiceInfo.Item>
+          <ServiceInfo.Item icon="car" label="Vehicle">
+            {transferType}
+          </ServiceInfo.Item>
+        </ServiceInfo>
+      </div>
+    </BookingResumeLayout>
+  );
+};

package/src/components/molecules/BookingResume/ResumeOtherService.tsx

@@ -0,0 +1,21 @@
+import { BookingPax } from '@/src/types/table/booking.types';
+import React from 'react';
+import { PaxDisplay } from '../PaxDisplay/PaxDisplay';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+import { BookingResumeLayout } from './BookingResumeLayout/BookingResumeLayout';
+
+export interface ResumeOtherServiceProps {
+  pax: BookingPax;
+}
+
+export const ResumeOtherService: React.FC<ResumeOtherServiceProps> = (props) => {
+  const { pax } = props;
+  return (
+    <BookingResumeLayout title="Other Services" icon="more">
+      <div className="space-y-1">
+        <TextWithIcon icon="wallet">Handling Fee</TextWithIcon>
+        <PaxDisplay pax={pax} />
+      </div>
+    </BookingResumeLayout>
+  );
+};

package/src/components/molecules/BookingResume/ResumeTransfer.tsx

@@ -0,0 +1,49 @@
+import { BookingPax } from '@/src/types/table/booking.types';
+import React from 'react';
+import { Text } from '../../atoms/Typography/Typography';
+import { DateDisplay } from '../DateDisplay/DateDisplay';
+import FromTo, { FromToProps } from '../FromTo/FromTo';
+import { PaxDisplay } from '../PaxDisplay/PaxDisplay';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+import { BookingResumeLayout } from './BookingResumeLayout/BookingResumeLayout';
+
+export interface ResumeTransferProps {
+  type: 'ARV' | 'DEP' | 'INH';
+  pax: BookingPax;
+  date: string;
+  location: Omit<FromToProps, 'transferType'>;
+  carName: string;
+  image: string;
+}
+
+export const ResumeTransfer: React.FC<ResumeTransferProps> = (props) => {
+  const { type, pax, date, location, carName, image } = props;
+
+  const transferType =
+    type === 'ARV' ? 'Arrival' : type === 'DEP' ? 'Departure' : 'Inter-Hotel';
+
+  return (
+    <BookingResumeLayout
+      title={
+        <>
+          Transfer{' '}
+          <Text color="accent" as="span" size="lg">
+            {transferType}
+          </Text>
+        </>
+      }
+      icon="car-front"
+      image={image}>
+      <div className="space-y-3">
+        <DateDisplay dates={[date]} textColor="accent" />
+        <FromTo from={location.from} to={location.to} />
+        <div className="space-y-1">
+          <PaxDisplay pax={pax} />
+          <TextWithIcon icon="car" textSize="sm" textVariant="medium">
+            {carName}
+          </TextWithIcon>
+        </div>
+      </div>
+    </BookingResumeLayout>
+  );
+};

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

@@ -0,0 +1,6 @@
+export * from './BookingResume';
+export type { BookingResumeLayoutProps } from './BookingResumeLayout/BookingResumeLayout';
+export type { ResumeAccomProps } from './ResumeAccom/ResumeAccom';
+export type { ResumeExcursionProps } from './ResumeExcursion/ResumeExcursion';
+export type { ResumeOtherServiceProps } from './ResumeOtherService';
+export type { ResumeTransferProps } from './ResumeTransfer';

package/src/components/molecules/Calendar/CalendarInput.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import Icon from "../../atoms/Icon/Icon";
+import React, { useState } from 'react';
+import Icon, { IconName } from '../../atoms/Icon/Icon';
 
 export interface CalendarInputProps {
   /** Placeholder text */
@@ -7,7 +7,7 @@ export interface CalendarInputProps {
   /** Selected date value (formatted as string) */
   value?: string;
   /** State of the input: default, active, typing, disabled, success, error */
-  state?: "default" | "active" | "typing" | "disabled" | "success" | "error";
+  state?: 'default' | 'active' | 'typing' | 'disabled' | 'success' | 'error';
   /** Helper/support text below input */
   /** Whether the input is disabled */
   disabled?: boolean;
@@ -26,36 +26,39 @@ export interface CalendarInputProps {
   /** Whether the calendar icon has full bg*/
   iconBGFull?: boolean;
   /** Position of the calendar icon: left or right */
-  iconPosition?: "left" | "right";
+  iconPosition?: 'left' | 'right';
   /** Show chevron on the right when icon is on the left */
   showChevron?: boolean;
   /** Whether the calendar popover is open */
   isOpen?: boolean;
+  /** Icon to display on the left of the input */
+  icon?: IconName;
 }
 
 const CalendarInput: React.FC<CalendarInputProps> = ({
-  placeholder = "Select date",
-  value = "",
-  state = "default",
+  placeholder = 'Select date',
+  value = '',
+  state = 'default',
   disabled = false,
   onClick,
   onCalendarClick,
   onChange,
   onFocus,
   onBlur,
-  className = "",
+  className = '',
   iconBGFull = true,
-  iconPosition = "right",
+  iconPosition = 'right',
   showChevron = false,
   isOpen = false,
+  icon = 'calendar',
 }) => {
   const [isFocused, setIsFocused] = useState(false);
   const [localValue, setLocalValue] = useState(value);
   const [isTyping, setIsTyping] = useState(false);
 
-  const finalState = disabled ? "disabled" : state;
+  const finalState = disabled ? 'disabled' : state;
   const displayState =
-    isFocused && isTyping ? "typing" : isFocused ? "active" : finalState;
+    isFocused && isTyping ? 'typing' : isFocused ? 'active' : finalState;
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
@@ -89,13 +92,12 @@ const CalendarInput: React.FC<CalendarInputProps> = ({
   const iconButton = (
     <button
       type="button"
-      className={`calendar-input__icon-button ${iconBGFull ? " calendar-input__icon-button--full-bg" : ""} calendar-input__icon-button--${iconPosition}`}
+      className={`calendar-input__icon-button ${iconBGFull ? ' calendar-input__icon-button--full-bg' : ''} calendar-input__icon-button--${iconPosition}`}
       onClick={handleCalendarClick}
       disabled={disabled}
       aria-label="Open calendar picker"
-      title="Select date"
-    >
-      <Icon name="calendar" size="sm" className="calendar-input__icon" />
+      title="Select date">
+      <Icon name={icon} size="sm" className="calendar-input__icon" />
     </button>
   );
 
@@ -103,10 +105,9 @@ const CalendarInput: React.FC<CalendarInputProps> = ({
     <div
       className={`calendar-input calendar-input--${displayState} calendar-input--icon-${iconPosition} ${className}`.trim()}
       data-node-id="3425:11289"
-      onClick={onClick}
-    >
-      {iconPosition === "left" && iconButton}
-      
+      onClick={onClick}>
+      {iconPosition === 'left' && iconButton}
+
       <div className="calendar-input__input-wrapper">
         <input
           type="text"
@@ -118,16 +119,17 @@ const CalendarInput: React.FC<CalendarInputProps> = ({
           onFocus={handleFocus}
           onBlur={handleBlur}
           readOnly={true}
-          aria-label={"Select date"}
+          aria-label={'Select date'}
         />
-        {iconPosition === "left" && showChevron && (
-          <div className={`calendar-input__chevron ${isOpen ? 'calendar-input__chevron--open' : ''}`}>
-            <Icon name={"chevron-down"} size="sm" />
+        {iconPosition === 'left' && showChevron && (
+          <div
+            className={`calendar-input__chevron ${isOpen ? 'calendar-input__chevron--open' : ''}`}>
+            <Icon name={'chevron-down'} size="sm" />
           </div>
         )}
       </div>
 
-      {iconPosition === "right" && iconButton}
+      {iconPosition === 'right' && iconButton}
     </div>
   );
 };

package/src/components/molecules/DateDisplay/DateDisplay.tsx

@@ -15,6 +15,9 @@ export interface DateDisplayProps {
 
   /** Size of the text */
   textSize?: TextProps['size'];
+
+  /** Text color */
+  textColor?: TextProps['color'];
 }
 
 /**
@@ -30,6 +33,7 @@ export const DateDisplay: React.FC<DateDisplayProps> = ({
   arrowSize = 'sm',
   calendarSize = 'sm',
   textSize = 'sm',
+  textColor = 'default',
 }) => {
   const formattedDate = useMemo(() => {
     return dates.map((d) => {
@@ -44,20 +48,20 @@ export const DateDisplay: React.FC<DateDisplayProps> = ({
   }, [dates]);
 
   return (
-    <div className="flex items-center gap-x-3">
+    <Text className="flex items-center gap-x-3" as="div" color={textColor}>
       {formattedDate.map((date, index) => (
         <Fragment key={`dd-${index}`}>
-          <span className="flex items-center gap-x-2">
+          <Text className="flex items-center gap-x-2" color={textColor} as="span">
             <Icon name="calendar2" size={calendarSize} />
-            <Text variant="medium" size={textSize}>
+            <Text variant="medium" size={textSize} color={textColor}>
               {date}
             </Text>
-          </span>
+          </Text>
           {formattedDate.length > 1 && index === 0 && (
             <Icon name="arrow-right-outline" size={arrowSize} />
           )}
         </Fragment>
       ))}
-    </div>
+    </Text>
   );
 };

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

@@ -0,0 +1,37 @@
+.cancellation-layout {
+  @apply py-6 relative space-y-6;
+  &::after {
+    content: '';
+    @apply absolute bottom-0 left-0 right-0;
+    height: 1px;
+    background-color: transparent;
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--divider-color-default) 0,
+      var(--divider-color-default) 8px,
+      transparent 8px,
+      transparent 16px
+    );
+  }
+  .chip__label {
+    @apply gap-x-4;
+  }
+}
+
+.cancellation-layout__content {
+  @apply flex gap-x-4 items-start;
+}
+
+.cancellation-layout__content-left {
+  @apply flex-1;
+}
+
+.cancellation-layout__content-right {
+  @apply overflow-hidden;
+  max-width: 150px;
+  border-radius: var(--border-radius-rounded-2xl);
+  img {
+    object-fit: cover;
+    height: 200px;
+  }
+}

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;