mautourco-components 0.2.10 → 0.2.11

package/src/components/atoms/Icon/icons/NightIcon.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-
-interface NightIconProps {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  className?: string;
-  color?: string;
-  /**
-   * Couleur par défaut si aucune couleur n'est spécifiée
-   */
-  defaultColor?: string;
-}
-
-const NightIcon: React.FC<NightIconProps> = ({ size = 'md', className = '', color }) => {
-  const getSizeClasses = () => {
-    switch (size) {
-      case 'xs':
-        return 'w-3 h-3';
-      case 'sm':
-        return 'w-4 h-4';
-      case 'md':
-        return 'w-5 h-5';
-      case 'lg':
-        return 'w-6 h-6';
-      case 'xl':
-        return 'w-8 h-8';
-      default:
-        return 'w-5 h-5';
-    }
-  };
-
-  const sizeClasses = getSizeClasses();
-  const colorClass = color ? `text-${color}` : 'text-current';
-  const classes = `${sizeClasses} ${colorClass} ${className}`;
-
-  return (
-    <svg className={classes} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M6.00764 5C6.00764 4.30117 6.15448 3.61779 6.43049 2.99023C5.9555 3.13903 5.50121 3.35522 5.08284 3.63477C4.21956 4.21164 3.54658 5.03196 3.14924 5.99121C2.752 6.95043 2.64787 8.00613 2.85042 9.02441C3.053 10.0428 3.55372 10.9777 4.28792 11.7119C5.02211 12.4461 5.95707 12.9468 6.97542 13.1494C7.9937 13.352 9.0494 13.2478 10.0086 12.8506C10.9679 12.4533 11.7882 11.7803 12.3651 10.917C12.6447 10.4984 12.8598 10.0436 13.0086 9.56836C12.3812 9.84424 11.6985 9.99219 10.9998 9.99219C9.6757 9.99219 8.40586 9.46657 7.46956 8.53027C6.53326 7.59397 6.00764 6.32413 6.00764 5ZM7.50764 5C7.50764 5.92631 7.87511 6.81473 8.5301 7.46973C9.1851 8.12472 10.0735 8.49219 10.9998 8.49219C11.9261 8.49219 12.8146 8.12472 13.4696 7.46973C13.684 7.25525 14.0067 7.1906 14.2869 7.30664C14.5672 7.42273 14.7498 7.69665 14.7498 8C14.7498 9.33502 14.3538 10.64 13.6121 11.75C12.8704 12.86 11.8162 13.7254 10.5828 14.2363C9.3496 14.7471 7.99262 14.8805 6.68342 14.6201C5.37405 14.3597 4.1704 13.7174 3.22639 12.7734C2.28239 11.8294 1.64016 10.6258 1.37971 9.31641C1.11938 8.00721 1.25271 6.65023 1.7635 5.41699C2.27439 4.18359 3.1398 3.12939 4.24983 2.3877C5.35986 1.646 6.66481 1.25 7.99983 1.25C8.30318 1.25 8.5771 1.43263 8.69319 1.71289C8.80923 1.99313 8.74458 2.31579 8.5301 2.53027C7.87511 3.18527 7.50764 4.07369 7.50764 5Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
-
-export default NightIcon;

package/src/components/atoms/Icon/icons/RowExcursion.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { DetailsCol as DetailsColComponent } from '../../../molecules/TableServiceItem/DetailsCol';
-import { ItemCol, ItemColProps } from '../../../molecules/TableServiceItem/ItemCol';
-
-export interface RowExcursionProps {
-  data: {
-    languages?: string[];
-    duration?: string;
-    accessibility?: string;
-    transferType?: string;
-  };
-}
-
-const clientType: Record<string, string> = {
-  standard: 'STD',
-  honeymooners: 'HMN',
-  vip: 'VIP',
-  vvip: 'VVIP',
-};
-
-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-pin"
-    />
-  );
-};
-
-RowExcursion.FirstCol = FirstCol;
-RowExcursion.DetailsCol = DetailsCol;

package/src/components/atoms/Icon/icons/StopWatchIcon.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-
-interface StopWatchIconProps {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  className?: string;
-  color?: string;
-  /**
-   * Couleur par défaut si aucune couleur n'est spécifiée
-   */
-  defaultColor?: string;
-}
-
-const StopWatchIcon: React.FC<StopWatchIconProps> = ({ size = 'md', className = '', color }) => {
-  const getSizeClasses = () => {
-    switch (size) {
-      case 'xs':
-        return 'w-3 h-3';
-      case 'sm':
-        return 'w-4 h-4';
-      case 'md':
-        return 'w-5 h-5';
-      case 'lg':
-        return 'w-6 h-6';
-      case 'xl':
-        return 'w-8 h-8';
-      default:
-        return 'w-5 h-5';
-    }
-  };
-
-  const sizeClasses = getSizeClasses();
-  const colorClass = color ? `text-${color}` : 'text-current';
-  const classes = `${sizeClasses} ${colorClass} ${className}`;
-
-  return (
-    <svg className={classes} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M12.585 9.33398C12.585 6.80268 10.5323 4.75098 8.00098 4.75098C5.46982 4.75115 3.41797 6.80279 3.41797 9.33398C3.41797 11.8652 5.46982 13.9168 8.00098 13.917C10.5323 13.917 12.585 11.8653 12.585 9.33398ZM9.4707 6.80371C9.76354 6.51087 10.2383 6.51098 10.5312 6.80371C10.8241 7.0966 10.8241 7.57136 10.5312 7.86426L8.53125 9.86426C8.23834 10.157 7.76354 10.1571 7.4707 9.86426C7.17803 9.57141 7.17803 9.09656 7.4707 8.80371L9.4707 6.80371ZM9.33496 0.583984L9.41113 0.587891C9.78941 0.626215 10.085 0.945597 10.085 1.33398C10.085 1.72237 9.78941 2.04175 9.41113 2.08008L9.33496 2.08398H6.66797C6.25376 2.08398 5.91797 1.7482 5.91797 1.33398C5.91797 0.919771 6.25376 0.583984 6.66797 0.583984H9.33496ZM14.085 9.33398C14.085 12.6937 11.3607 15.417 8.00098 15.417C4.64139 15.4168 1.91797 12.6936 1.91797 9.33398C1.91797 5.97436 4.64139 3.25115 8.00098 3.25098C11.3607 3.25098 14.085 5.97425 14.085 9.33398Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
-
-export default StopWatchIcon;

package/src/components/atoms/Icon/icons/Utensils.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-
-interface UtensilsIconProps {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  className?: string;
-  color?: string;
-  /**
-   * Couleur par défaut si aucune couleur n'est spécifiée
-   */
-  defaultColor?: string;
-}
-
-const UtensilsIcon: React.FC<UtensilsIconProps> = ({ size = 'md', className = '', color }) => {
-  const getSizeClasses = () => {
-    switch (size) {
-      case 'xs':
-        return 'w-3 h-3';
-      case 'sm':
-        return 'w-4 h-4';
-      case 'md':
-        return 'w-5 h-5';
-      case 'lg':
-        return 'w-6 h-6';
-      case 'xl':
-        return 'w-8 h-8';
-      default:
-        return 'w-5 h-5';
-    }
-  };
-
-  const sizeClasses = getSizeClasses();
-  const colorClass = color ? `text-${color}` : 'text-current';
-  const classes = `${sizeClasses} ${colorClass} ${className}`;
-
-  return (
-    <svg className={classes} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M3.91699 14.667V8.08398H3.33301C2.18572 8.08381 1.25018 7.14827 1.25 6.00098V1.33398C1.25 0.919771 1.58579 0.583984 2 0.583984C2.41421 0.583984 2.75 0.919771 2.75 1.33398V6.00098C2.75018 6.31984 3.01414 6.5838 3.33301 6.58398H3.91699V1.33398C3.91699 0.919771 4.25278 0.583984 4.66699 0.583984C5.08106 0.58416 5.41699 0.919879 5.41699 1.33398V6.58398H6C6.15463 6.58398 6.30273 6.52238 6.41211 6.41309C6.52143 6.30377 6.58292 6.15557 6.58301 6.00098V1.33398C6.58301 0.919879 6.91894 0.58416 7.33301 0.583984C7.74722 0.583984 8.08301 0.919771 8.08301 1.33398V6.00098C8.08292 6.55339 7.86328 7.08301 7.47266 7.47363C7.08197 7.86423 6.55246 8.08398 6 8.08398H5.41699V14.667C5.41699 15.0811 5.08106 15.4168 4.66699 15.417C4.25278 15.417 3.91699 15.0812 3.91699 14.667ZM13.25 14.667V10.751H12C10.8525 10.751 9.91699 9.81454 9.91699 8.66699V4.66699C9.91708 3.5843 10.3468 2.54594 11.1123 1.78027C11.8781 1.0145 12.917 0.583984 14 0.583984L14.1475 0.598633C14.2914 0.627508 14.4249 0.698334 14.5303 0.803711C14.6709 0.944363 14.75 1.13507 14.75 1.33398V14.667C14.75 15.0812 14.4142 15.417 14 15.417C13.5858 15.417 13.25 15.0812 13.25 14.667ZM11.417 8.66699C11.417 8.98611 11.6809 9.25098 12 9.25098H13.25V2.19434C12.847 2.31656 12.476 2.53763 12.1729 2.84082C11.6887 3.32518 11.4171 3.98212 11.417 4.66699V8.66699Z"
-        fill="#303642"
-      />
-    </svg>
-  );
-};
-
-export default UtensilsIcon;

package/src/components/atoms/Icon/icons/WalletIcon.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-
-interface WalletIconProps {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  className?: string;
-  color?: string;
-  /**
-   * Couleur par défaut si aucune couleur n'est spécifiée
-   */
-  defaultColor?: string;
-}
-
-const WalletIcon: React.FC<WalletIconProps> = ({ size = 'md', className = '', color }) => {
-  const getSizeClasses = () => {
-    switch (size) {
-      case 'xs':
-        return 'w-3 h-3';
-      case 'sm':
-        return 'w-4 h-4';
-      case 'md':
-        return 'w-5 h-5';
-      case 'lg':
-        return 'w-6 h-6';
-      case 'xl':
-        return 'w-8 h-8';
-      default:
-        return 'w-5 h-5';
-    }
-  };
-
-  const sizeClasses = getSizeClasses();
-  const colorClass = color ? `text-${color}` : 'text-current';
-  const classes = `${sizeClasses} ${colorClass} ${className}`;
-
-  return (
-    <svg className={classes} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M2.75 12.667C2.75009 12.8216 2.81158 12.9698 2.9209 13.0791C3.03022 13.1884 3.17841 13.2499 3.33301 13.25H13.25V11.417H12C11.4476 11.417 10.918 11.1971 10.5273 10.8066C10.1366 10.4159 9.91699 9.88554 9.91699 9.33301C9.91708 8.78059 10.1367 8.25097 10.5273 7.86035C10.918 7.46975 11.4475 7.25 12 7.25H13.25V5.41699H3.33301C3.1337 5.41696 2.93795 5.38594 2.75 5.33105V12.667ZM11.417 9.33301C11.417 9.48772 11.4785 9.6367 11.5879 9.74609C11.6973 9.85529 11.8454 9.91699 12 9.91699H13.917V8.75H12C11.8454 8.75 11.6973 8.8116 11.5879 8.9209C11.4786 9.03022 11.4171 9.17842 11.417 9.33301ZM2.75 3.33301C2.75 3.48772 2.8115 3.6367 2.9209 3.74609C3.0302 3.85531 3.17849 3.91691 3.33301 3.91699H11.917V2.75H3.33301C3.17842 2.75009 3.03022 2.81158 2.9209 2.9209C2.81158 3.03022 2.75009 3.17842 2.75 3.33301ZM13.417 3.9209C13.7156 3.93857 14.0008 4.04832 14.2314 4.2373L14.335 4.33203L14.4287 4.43555C14.6353 4.68759 14.7499 5.00428 14.75 5.33301V7.46582C14.8012 7.49777 14.8505 7.53279 14.8975 7.57129L15.002 7.66504L15.0957 7.76855C15.3024 8.02068 15.417 8.33813 15.417 8.66699V10C15.417 10.3757 15.2676 10.7363 15.002 11.002C14.9255 11.0784 14.8402 11.1438 14.75 11.2002V13.333C14.75 13.7087 14.6006 14.0693 14.335 14.335C14.0693 14.6006 13.7087 14.75 13.333 14.75H3.33301C2.78059 14.7499 2.25098 14.5303 1.86035 14.1396C1.46973 13.749 1.25009 13.2194 1.25 12.667V3.33301C1.25009 2.78059 1.46973 2.25098 1.86035 1.86035C2.25098 1.46973 2.78059 1.25009 3.33301 1.25H12C12.3288 1.25 12.6454 1.36473 12.8975 1.57129L13.002 1.66504L13.0957 1.76855C13.3024 2.02068 13.417 2.33813 13.417 2.66699V3.9209Z"
-        fill="black"
-      />
-    </svg>
-  );
-};
-
-export default WalletIcon;

package/src/components/molecules/ActionDropdown/ActionDropdown.css

@@ -1,23 +0,0 @@
-.action-dropdown {
-  @apply relative;
-  width: 153px;
-  background-color: #fff;
-  padding: var(--spacing-padding-px-4);
-  border-radius: var(--border-radius-rounded-xl);
-  button {
-    @apply flex items-center w-full;
-    @apply transition-all duration-200;
-    height: 36px;
-    border-radius: var(--border-radius-rounded-md);
-    padding-inline: var(--spacing-padding-px-2);
-    &:hover {
-      background-color: var(--color-neutral-100);
-    }
-  }
-}
-
-.action-dropdown-trigger {
-  @apply w-8 h-8 flex items-center justify-center;
-  border-radius: var(--border-radius-rounded-lg);
-  background-color: var(--color-neutral-100);
-}

package/src/components/molecules/ActionDropdown/ActionDropdown.tsx

@@ -1,53 +0,0 @@
-import { useState } from 'react';
-import Icon from '../../atoms/Icon/Icon';
-import { Text } from '../../atoms/Typography/Typography';
-import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
-import './ActionDropdown.css';
-
-export interface ActionDropdownItem {
-  /** Label for the action dropdown item */
-  label: string;
-  /** Callback function to be called when the action dropdown item is clicked */
-  onClick?: () => void;
-}
-
-export interface ActionDropdownProps {
-  /** Data for the action dropdown */
-  data: ActionDropdownItem[];
-}
-
-/**
- * A dropdown component that displays a list of actions triggered by a more icon button. Uses a Popover for the dropdown menu.
- *
- * @example
- * <ActionDropdown data={data} />
- * @param ActionDropdownProps
- * @returns
- */
-export const ActionDropdown: React.FC<ActionDropdownProps> = ({ data }) => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger>
-        <button className="action-dropdown-trigger">
-          <Icon name="more-vertical" />
-        </button>
-      </PopoverTrigger>
-      <PopoverContent className="action-dropdown" align="end">
-        {data.map((item, index) => (
-          <button
-            key={`ad-${index}`}
-            onClick={() => {
-              setOpen(false);
-              item.onClick?.();
-            }}>
-            <Text variant="medium" size="sm" as="span">
-              {item.label}
-            </Text>
-          </button>
-        ))}
-      </PopoverContent>
-    </Popover>
-  );
-};

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

@@ -1,47 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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;