mautourco-components 0.2.12 → 0.2.14

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

@@ -0,0 +1,47 @@
+import { format, isValid } from 'date-fns';
+import React, { Fragment, useMemo } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+
+export interface DateDisplayProps {
+  /** Dates to display */
+  date: string[] | Date[];
+}
+
+/**
+ * A component for displaying a list of dates in a readable format.
+ *
+ * @example
+ * <DateDisplay date={['2025-01-01', '2025-01-02']} />
+ * @param DateDisplayProps
+ * @returns
+ */
+export const DateDisplay: React.FC<DateDisplayProps> = ({ date }) => {
+  const formattedDate = useMemo(() => {
+    return date.map((d) => {
+      const dateObj = new Date(d);
+      // Check if the date is valid then format it to dd/MM/yyyy format
+      if (isValid(dateObj)) {
+        return format(dateObj, 'dd/MM/yyyy');
+      }
+      // If the date is not valid, return the original date
+      return d;
+    }) as string[];
+  }, [date]);
+
+  return (
+    <div className="flex items-center gap-x-3">
+      {formattedDate.map((date, index) => (
+        <Fragment key={`dd-${index}`}>
+          <span className="flex items-center gap-x-2">
+            <Icon name="calendar2" size="sm" />
+            <Text variant="medium" size="sm">
+              {date}
+            </Text>
+          </span>
+          {formattedDate.length > 1 && index === 0 && <Icon name="arrow-right-outline" size="sm" />}
+        </Fragment>
+      ))}
+    </div>
+  );
+};

package/src/components/molecules/FromTo/FromTo.tsx

@@ -0,0 +1,31 @@
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+
+export interface FromToProps {
+  from?: string;
+  to?: string;
+  transferType?: string;
+}
+
+const FromTo: React.FC<Omit<FromToProps, 'transferType'>> = (props) => {
+  const { from, to } = props;
+
+  const getTransferLocationName = (location?: string) => {
+    if (!location) return '';
+    return location.toLowerCase() === 'airport' ? 'Plaisance Airport' : location;
+  };
+
+  return (
+    <div className="grid gap-y-1">
+      <Text variant="regular" size="sm" leading="5">
+        {getTransferLocationName(from)}
+      </Text>
+      <Icon name="arrow-down-outline" size="sm" />
+      <Text variant="regular" size="sm" leading="5">
+        {getTransferLocationName(to)}
+      </Text>
+    </div>
+  );
+};
+
+export default FromTo;

package/src/components/molecules/TableServiceItem/DetailsCol.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { IconName } from '../../atoms/Icon/Icon';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+
+interface DetailsColData {
+  icon: IconName;
+  value: React.ReactNode;
+}
+
+export interface DetailsColProps {
+  data: DetailsColData[];
+  index?: number;
+}
+
+export const DetailsCol: React.FC<DetailsColProps> = (props) => {
+  const { data } = props;
+
+  return (
+    <div className="grid gap-y-1">
+      {data.map((item) => (
+        <TextWithIcon icon={item.icon}>{item.value}</TextWithIcon>
+      ))}
+    </div>
+  );
+};

package/src/components/molecules/TableServiceItem/ItemCol.tsx

@@ -0,0 +1,68 @@
+import { Text } from '@/src/components/atoms/Typography/Typography';
+import { cn } from '@/src/lib/utils';
+import Chip from '../../atoms/Chip/Chip';
+import { IconName } from '../../atoms/Icon/Icon';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+
+export interface ItemColProps {
+  serviceType: 'Accommodation' | 'Excursion' | 'Transfer' | 'Other Services';
+  serviceName?: string;
+  extraTitle?: React.ReactNode;
+  offers?: any[];
+  status?: string;
+  iconName?: IconName;
+  showName?: boolean;
+  children?: React.ReactNode;
+}
+
+export const ItemCol: React.FC<ItemColProps> = (props) => {
+  const {
+    serviceType,
+    serviceName,
+    offers,
+    status,
+    iconName = 'accom',
+    showName = true,
+    extraTitle,
+    children,
+  } = props;
+
+  const isOnRequest = status?.toLowerCase() === 'on request';
+
+  return (
+    <div className={cn('grid', offers?.length && 'gap-y-3')}>
+      <div>
+        {serviceName && (
+          <div className="grid gap-y-1">
+            <div className="flex items-center gap-x-2">
+              <TextWithIcon icon={iconName} color={isOnRequest ? 'yellow' : 'accent'}>
+                {serviceType}
+              </TextWithIcon>
+              {isOnRequest && <Chip color="yellow">{status}</Chip>}
+              {extraTitle}
+            </div>
+            <Text variant="bold" size="sm">
+              {showName && serviceName}
+            </Text>
+          </div>
+        )}
+        {children}
+      </div>
+      {offers && offers.length > 0 && (
+        <div>
+          <Text variant="bold" size="sm" leading="5">
+            Applicable offers:
+          </Text>
+          <Text variant="regular" size="sm" leading="5">
+            {offers.map((o) => {
+              const offerValue =
+                o.OfferType === 'GIFT' ? o.OfferName : `${o.OfferValue}%  offers applied`;
+
+              return <span>{offerValue}</span>;
+            })}
+          </Text>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/molecules/TableServiceItem/RowAccommodation.tsx

@@ -0,0 +1,56 @@
+import { differenceInDays } from 'date-fns';
+import React, { useMemo } from 'react';
+import { DetailsCol as DetailsColComponent } from './DetailsCol';
+import { ItemCol, ItemColProps } from './ItemCol';
+
+export interface RowAccommodationProps {
+  data: {
+    RoomName?: string;
+    Dates?: string[];
+    ClientCategory?: string;
+    MealPlan?: string;
+  };
+  index?: number;
+}
+
+const clientType: Record<string, string> = {
+  standard: 'STD',
+  honeymooners: 'HMN',
+  vip: 'VIP',
+  vvip: 'VVIP',
+};
+
+export function RowAccommodation() {
+  return <></>;
+}
+
+const DetailsCol: React.FC<RowAccommodationProps> = (props) => {
+  const { data, index = 0 } = props;
+
+  const stay = useMemo(() => {
+    if (data.Dates?.length) {
+      return differenceInDays(data.Dates[1], data.Dates[0]);
+    }
+
+    return 0;
+  }, [data]);
+  return (
+    <DetailsColComponent
+      data={[
+        { icon: 'calendar2', value: `Room ${index + 1} : ${data.RoomName}` },
+        { icon: 'night', value: `${stay} Nights` },
+        { icon: 'user', value: `Client type : ${clientType[data.ClientCategory?.toLowerCase() as string]}` },
+        { icon: 'utensils', value: `Meal plan : ${data.MealPlan}` },
+      ]}
+    />
+  );
+};
+
+const FirstCol: React.FC<Omit<ItemColProps, 'serviceType'>> = (props) => {
+  const { serviceName, offers, status } = props;
+
+  return <ItemCol serviceType="Accommodation" serviceName={serviceName} offers={offers} status={status} />;
+};
+
+RowAccommodation.FirstCol = FirstCol;
+RowAccommodation.DetailsCol = DetailsCol;

package/src/components/molecules/TableServiceItem/RowExcursion.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { DetailsCol as DetailsColComponent } from './DetailsCol';
+import { ItemCol, ItemColProps } from './ItemCol';
+
+export interface RowExcursionProps {
+  data: {
+    languages?: string[];
+    duration?: string;
+    accessibility?: string;
+    transferType?: string;
+  };
+}
+
+export function RowExcursion() {
+  return <></>;
+}
+
+export const DetailsCol: React.FC<RowExcursionProps> = (props) => {
+  const { data } = props;
+
+  return (
+    <DetailsColComponent
+      data={[
+        { icon: 'micro', value: `Languages: ${data.languages?.join(' and ')}` },
+        { icon: 'stopwatch', value: `Duration: ${data.duration}` },
+        { icon: 'user', value: `Difficulty: ${data.accessibility}` },
+        { icon: 'bus', value: `Type: ${data.transferType}` },
+      ]}
+    />
+  );
+};
+
+const FirstCol: React.FC<Omit<ItemColProps, 'serviceType' | 'status'>> = (props) => {
+  const { serviceName, offers } = props;
+
+  return <ItemCol serviceType="Excursion" serviceName={serviceName} offers={offers} iconName="map" />;
+};
+
+RowExcursion.FirstCol = FirstCol;
+RowExcursion.DetailsCol = DetailsCol;

package/src/components/molecules/TableServiceItem/RowOtherServices.tsx

@@ -0,0 +1,50 @@
+import '@/src/index.css';
+import React from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import { TooltipDisplay } from '../TooltipDisplay/TooltipDisplay';
+import { DetailsCol as DetailsColComponent } from './DetailsCol';
+import { ItemCol, ItemColProps } from './ItemCol';
+
+export function RowOtherServices() {
+  return <></>;
+}
+
+export const DetailsCol = () => {
+  return (
+    <DetailsColComponent
+      data={[
+        {
+          icon: 'wallet',
+          value: (
+            <Text
+              variant="medium"
+              size="sm"
+              leading="5"
+              as="div"
+              className="flex items-center gap-x-2">
+              Handling Fee
+              <TooltipDisplay content="Handling fee varies and is determined by the final number of people during booking. ">
+                <Icon name="info" size="sm" />
+              </TooltipDisplay>
+            </Text>
+          ),
+        },
+      ]}
+    />
+  );
+};
+
+const FirstCol: React.FC<Omit<ItemColProps, 'serviceType' | 'status'>> = (props) => {
+  return (
+    <ItemCol
+      serviceType="Other Services"
+      iconName="more"
+      serviceName="Handling Fee"
+      showName={false}
+    />
+  );
+};
+
+RowOtherServices.FirstCol = FirstCol;
+RowOtherServices.DetailsCol = DetailsCol;

package/src/components/molecules/TableServiceItem/RowTransfer.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Text } from '../../atoms/Typography/Typography';
+import FromTo, { FromToProps } from '../FromTo/FromTo';
+import { DetailsCol as DetailsColComponent } from './DetailsCol';
+import { ItemCol, ItemColProps } from './ItemCol';
+
+export interface RowTransferProps {
+  data: {
+    carType?: string;
+    clientType?: string;
+  };
+}
+
+const transferTypeMap: Record<string, string> = {
+  ARV: 'Arrival',
+  DEP: 'Departure',
+  INH: 'Inter-Hotel',
+};
+
+export function RowTransfer() {
+  return <></>;
+}
+
+export const DetailsCol: React.FC<RowTransferProps> = (props) => {
+  const { data } = props;
+
+  return (
+    <DetailsColComponent
+      data={[
+        { icon: 'car', value: data.carType },
+        { icon: 'user', value: `Client type: ${data.clientType}` },
+      ]}
+    />
+  );
+};
+
+const FirstCol: React.FC<Omit<ItemColProps, 'serviceType' | 'status'> & FromToProps> = (
+  props
+) => {
+  const { serviceName, offers, transferType, from, to } = props;
+
+  return (
+    <ItemCol
+      serviceType="Transfer"
+      serviceName={serviceName}
+      offers={offers}
+      iconName="car"
+      showName={false}
+      extraTitle={
+        <Text variant="bold" size="sm" className="italic">
+          {transferTypeMap[transferType as string]}
+        </Text>
+      }>
+      <FromTo from={from} to={to} />
+    </ItemCol>
+  );
+};
+
+RowTransfer.FirstCol = FirstCol;
+RowTransfer.DetailsCol = DetailsCol;

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

@@ -0,0 +1,24 @@
+import { DetailsCol, type DetailsColProps } from './DetailsCol';
+import { ItemCol, type ItemColProps } from './ItemCol';
+import { RowAccommodation, type RowAccommodationProps } from './RowAccommodation';
+import { RowExcursion, type RowExcursionProps } from './RowExcursion';
+import { RowOtherServices } from './RowOtherServices';
+import { RowTransfer, type RowTransferProps } from './RowTransfer';
+
+const TableServiceItem = {
+  DetailsCol,
+  ItemCol,
+  RowAccommodation,
+  RowExcursion,
+  RowOtherServices,
+  RowTransfer,
+};
+
+export type {
+  DetailsColProps,
+  ItemColProps,
+  RowAccommodationProps,
+  RowExcursionProps,
+  RowTransferProps,
+};
+export default TableServiceItem;

package/src/components/molecules/TextWithIcon/TextWithIcon.tsx

@@ -0,0 +1,62 @@
+import { cn } from '@/src/lib/utils';
+import Icon, { IconName } from '../../atoms/Icon/Icon';
+import { Text, TextColor, TextLeading, TextVariant } from '../../atoms/Typography/Typography';
+
+export interface TextWithIconProps {
+  /** Icon to display */
+  icon: IconName;
+
+  /** Icon size */
+  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /** Children to display */
+  children: React.ReactNode;
+
+  /** Color of the text */
+  color?: TextColor;
+
+  /** Leading of the text */
+  textLeading?: TextLeading;
+
+  /** Variant of the text */
+  textVariant?: TextVariant;
+}
+
+/**
+ * A component that displays a text with an icon.
+ *
+ * @example
+ * <TextWithIcon icon="calendar" color="yellow">
+ *   20/12/2025
+ * </TextWithIcon>
+ *
+ * @param TextWithIconProps
+ * @returns
+ */
+const TextWithIcon: React.FC<TextWithIconProps> = (props) => {
+  const { icon, children, iconSize = 'sm', color = 'default', textLeading = '5', textVariant = 'medium' } = props;
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-x-2',
+        color === 'yellow' && 'text-[var(--color-yellow-600)]',
+        color === 'accent' && 'text-[var(--color-text-accent)]'
+      )}>
+      <span>
+        <Icon name={icon} size={iconSize} />
+      </span>
+      <Text
+        variant={textVariant}
+        size={iconSize}
+        className="flex items-center gap-x-2"
+        color={color}
+        leading={textLeading}
+        as="div">
+        {children}
+      </Text>
+    </div>
+  );
+};
+
+export default TextWithIcon;

package/src/components/molecules/TooltipDisplay/TooltipDisplay.tsx

@@ -0,0 +1,32 @@
+import { TooltipContentProps } from '@radix-ui/react-tooltip';
+import React from 'react';
+import { Text } from '../../atoms/Typography/Typography';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip';
+
+export interface TooltipDisplayProps {
+  /** Trigger element */
+  children: React.ReactNode;
+
+  /** Tooltip content */
+  content: string;
+
+  /** Side of the tooltip */
+  side?: TooltipContentProps['side'];
+
+  /** Maximum width of the tooltip */
+  maxWidth?: `${number}px`;
+}
+
+export const TooltipDisplay: React.FC<TooltipDisplayProps> = (props) => {
+  const { children, content, side = 'right', maxWidth = '300px' } = props;
+  return (
+    <Tooltip>
+      <TooltipTrigger className="text-[var(--color-icon-branded)]">{children}</TooltipTrigger>
+      <TooltipContent className={`max-w-[${maxWidth}]`} side={side}>
+        <Text variant="medium" size="sm" className="!text-white">
+          {content}
+        </Text>
+      </TooltipContent>
+    </Tooltip>
+  );
+};

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

@@ -10,3 +10,6 @@ export type {
 
 
 
+
+
+