mautourco-components 0.2.35 → 0.2.37

package/src/components/molecules/BookingPax/BookingPaxRemarks.tsx

@@ -20,7 +20,8 @@ export interface BookingPaxRemarksProps {
  * @param props - The props for the BookingPaxRemarks component.
  * @returns The BookingPaxRemarks component.
  */
-export const BookingPaxRemarks: React.FC<BookingPaxRemarksProps> = ({ onChange }) => {
+export function BookingPaxRemarks(props: BookingPaxRemarksProps) {
+  const { onChange } = props;
   const [remarks, setRemarks] = useState('');
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -57,4 +58,4 @@ export const BookingPaxRemarks: React.FC<BookingPaxRemarksProps> = ({ onChange }
       />
     </div>
   );
-};
+}

package/src/components/molecules/BookingPax/BookingPaxTransfer.tsx

@@ -89,7 +89,7 @@ export const mapTransferType: Record<BookingPaxTransferProps['type'], string> =
  * @param props - The props for the BookingPaxTransfer component.
  * @returns The BookingPaxTransfer component.
  */
-export const BookingPaxTransfer: React.FC<BookingPaxTransferProps> = (props) => {
+export function BookingPaxTransfer(props: BookingPaxTransferProps) {
   const {
     from,
     to,
@@ -168,4 +168,4 @@ export const BookingPaxTransfer: React.FC<BookingPaxTransferProps> = (props) =>
       <BookingPaxRemarks onChange={onRemarkChange} />
     </BookingPaxLayout>
   );
-};
+}

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

@@ -5,9 +5,9 @@ import { ResumeExcursion } from './ResumeExcursion/ResumeExcursion';
 import { ResumeOtherService } from './ResumeOtherService';
 import { ResumeTransfer } from './ResumeTransfer';
 
-export const BookingResume = (props: React.PropsWithChildren) => {
+export function BookingResume(props: React.PropsWithChildren) {
   return <div className="booking-resume space-y-8" {...props} />;
-};
+}
 
 BookingResume.Layout = BookingResumeLayout;
 BookingResume.Accommodation = ResumeAccom;

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

@@ -12,7 +12,7 @@ export interface BookingResumeLayoutProps {
   className?: string;
 }
 
-export const BookingResumeLayout: React.FC<BookingResumeLayoutProps> = (props) => {
+export function BookingResumeLayout(props: BookingResumeLayoutProps) {
   const { title, icon, image, children, className } = props;
   return (
     <div className={cn('booking-resume-layout', className)}>
@@ -34,4 +34,4 @@ export const BookingResumeLayout: React.FC<BookingResumeLayoutProps> = (props) =
       </div>
     </div>
   );
-};
+}

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

@@ -1,7 +1,6 @@
 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';
@@ -20,7 +19,7 @@ export interface ResumeAccomProps {
   rooms: Partial<RoomItem>[];
 }
 
-export const ResumeAccom: React.FC<ResumeAccomProps> = (props) => {
+export function ResumeAccom(props: ResumeAccomProps) {
   const { image, dates, clientType, pax, rooms, hotelName } = props;
 
   const stay = useStays(dates);
@@ -60,4 +59,4 @@ export const ResumeAccom: React.FC<ResumeAccomProps> = (props) => {
       </div>
     </BookingResumeLayout>
   );
-};
+}

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

@@ -1,5 +1,4 @@
 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';
@@ -26,7 +25,7 @@ const mapType: Record<ResumeExcursionProps['type'], string> = {
   catamaran: 'Cruise excursion',
 };
 
-export const ResumeExcursion: React.FC<ResumeExcursionProps> = (props) => {
+export function ResumeExcursion(props: ResumeExcursionProps) {
   const {
     image,
     date,
@@ -72,4 +71,4 @@ export const ResumeExcursion: React.FC<ResumeExcursionProps> = (props) => {
       </div>
     </BookingResumeLayout>
   );
-};
+}

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

@@ -1,5 +1,4 @@
 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';
@@ -8,7 +7,7 @@ export interface ResumeOtherServiceProps {
   pax: BookingPax;
 }
 
-export const ResumeOtherService: React.FC<ResumeOtherServiceProps> = (props) => {
+export function ResumeOtherService(props: ResumeOtherServiceProps) {
   const { pax } = props;
   return (
     <BookingResumeLayout title="Other Services" icon="more">
@@ -18,4 +17,4 @@ export const ResumeOtherService: React.FC<ResumeOtherServiceProps> = (props) =>
       </div>
     </BookingResumeLayout>
   );
-};
+}

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

@@ -1,5 +1,4 @@
 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';
@@ -16,7 +15,7 @@ export interface ResumeTransferProps {
   image: string;
 }
 
-export const ResumeTransfer: React.FC<ResumeTransferProps> = (props) => {
+export function ResumeTransfer(props: ResumeTransferProps) {
   const { type, pax, date, location, carName, image } = props;
 
   const transferType =
@@ -46,4 +45,4 @@ export const ResumeTransfer: React.FC<ResumeTransferProps> = (props) => {
       </div>
     </BookingResumeLayout>
   );
-};
+}

package/src/components/molecules/Breadcrumbs/Breadcrumbs.tsx

@@ -1,5 +1,4 @@
 import { cn } from '@/src/lib/utils';
-import React from 'react';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
 import './Breadcrumbs.css';
@@ -14,7 +13,7 @@ export interface BreadcrumbsProps {
   onBack?: () => void;
 }
 
-export const Breadcrumbs: React.FC<BreadcrumbsProps> = (props) => {
+export function Breadcrumbs(props: BreadcrumbsProps) {
   const { items, onBack } = props;
 
   return (
@@ -44,4 +43,4 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = (props) => {
       ))}
     </ol>
   );
-};
+}

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

@@ -1,5 +1,5 @@
 import { format, isValid } from 'date-fns';
-import React, { Fragment, useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 import Icon from '../../atoms/Icon/Icon';
 import { Text, TextProps } from '../../atoms/Typography/Typography';
 import './DateDisplay.css';
@@ -35,14 +35,15 @@ export interface DateDisplayProps {
  * @param DateDisplayProps
  * @returns
  */
-export const DateDisplay: React.FC<DateDisplayProps> = ({
-  dates = [],
-  arrowSize = 'sm',
-  calendarSize = 'sm',
-  textSize = 'sm',
-  colorMode = 'black',
-  className = '',
-}) => {
+export function DateDisplay(props: DateDisplayProps) {
+  const {
+    dates = [],
+    arrowSize = 'sm',
+    calendarSize = 'sm',
+    textSize = 'sm',
+    colorMode = 'black',
+    className = '',
+  } = props;
   const formattedDates = useMemo(() => {
     return dates.map((d) => {
       const dateObj = typeof d === 'string' ? new Date(d) : d;
@@ -92,4 +93,4 @@ export const DateDisplay: React.FC<DateDisplayProps> = ({
       ))}
     </div>
   );
-};
+}

package/src/components/molecules/DetailsInfo/DetailsAction.tsx

@@ -1,6 +1,5 @@
 import { cn } from '@/src/lib/utils';
 import { ActionDropdownType } from '@/src/types/table';
-import React from 'react';
 import Button, { ButtonProps } from '../../atoms/Button/Button';
 import { ActionDropdown, ActionDropdownItem } from '../ActionDropdown/ActionDropdown';
 
@@ -14,7 +13,7 @@ export interface DetailsActionProps {
   dropdownMaxWidth?: string;
 }
 
-export const DetailsAction: React.FC<DetailsActionProps> = (props) => {
+export function DetailsAction(props: DetailsActionProps) {
   const {
     data = [],
     onAction,
@@ -65,4 +64,4 @@ export const DetailsAction: React.FC<DetailsActionProps> = (props) => {
       </Button>
     </ActionDropdown>
   );
-};
+}

package/src/components/molecules/DetailsInfo/DetailsAgency/DetailsAgency.tsx

@@ -14,7 +14,7 @@ export interface DetailsAgencyProps {
   children?: React.ReactNode;
 }
 
-export const DetailsAgency: React.FC<DetailsAgencyProps> = (props) => {
+export function DetailsAgency(props: DetailsAgencyProps) {
   const { name, clientType, isOnRequest, children } = props;
   return (
     <div className="flex flex-col gap-y-6 items-end">
@@ -54,4 +54,4 @@ export const DetailsAgency: React.FC<DetailsAgencyProps> = (props) => {
       {children}
     </div>
   );
-};
+}

package/src/components/molecules/DetailsInfo/DetailsClient/DetailsClient.tsx

@@ -1,6 +1,5 @@
 import Chip from '@/src/components/atoms/Chip/Chip';
 import { Text } from '@/src/components/atoms/Typography/Typography';
-import React from 'react';
 import { languagesMap } from '../../ServiceLanguages/constant';
 import './DetailsClient.css';
 
@@ -16,7 +15,7 @@ export interface DetailsClientInfoProps {
   clients: DetailsClientInfoItem[];
 }
 
-export const DetailsClientInfo: React.FC<DetailsClientInfoProps> = (props) => {
+export function DetailsClientInfo(props: DetailsClientInfoProps) {
   const { language, clients } = props;
   return (
     <div className="details-client">
@@ -53,4 +52,4 @@ export const DetailsClientInfo: React.FC<DetailsClientInfoProps> = (props) => {
       </div>
     </div>
   );
-};
+}

package/src/components/molecules/DetailsInfo/DetailsFile.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Text } from '../../atoms/Typography/Typography';
 
 export interface DetailsFileProps {
@@ -14,7 +13,7 @@ export interface DetailsFileProps {
   showRegularInfo?: boolean;
 }
 
-export const DetailsFile: React.FC<DetailsFileProps> = (props) => {
+export function DetailsFile(props: DetailsFileProps) {
   const {
     number,
     name,
@@ -39,4 +38,4 @@ export const DetailsFile: React.FC<DetailsFileProps> = (props) => {
       </Text>
     </div>
   );
-};
+}

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

@@ -15,7 +15,7 @@ export interface CancellationLayoutProps {
   currency?: string;
 }
 
-export const CancellationLayout: React.FC<CancellationLayoutProps> = (props) => {
+export function CancellationLayout(props: CancellationLayoutProps) {
   const { title, icon, children, className, image, cancellationFee, currency } = props;
   return (
     <div className={cn('cancellation-layout', className)}>
@@ -36,4 +36,4 @@ export const CancellationLayout: React.FC<CancellationLayoutProps> = (props) =>
       )}
     </div>
   );
-};
+}

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

@@ -16,9 +16,7 @@ export interface DialogCancellationAccomProps {
   currency?: string;
 }
 
-export const DialogCancellationAccom: React.FC<DialogCancellationAccomProps> = (
-  props
-) => {
+export function DialogCancellationAccom(props: DialogCancellationAccomProps) {
   const { image, hotelName, dates, rooms, cancellationFee, currency } = props;
   const stay = useStays(dates);
 
@@ -69,4 +67,4 @@ export const DialogCancellationAccom: React.FC<DialogCancellationAccomProps> = (
       </div>
     </CancellationLayout>
   );
-};
+}

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

@@ -21,9 +21,7 @@ export interface DialogCancellationExcursionProps {
   currency?: string;
 }
 
-export const DialogCancellationExcursion: React.FC<DialogCancellationExcursionProps> = (
-  props
-) => {
+export function DialogCancellationExcursion(props: DialogCancellationExcursionProps) {
   const { image, excursionName, date, details, policy, cancellationFee, currency } =
     props;
 
@@ -64,4 +62,4 @@ export const DialogCancellationExcursion: React.FC<DialogCancellationExcursionPr
       </div>
     </CancellationLayout>
   );
-};
+}

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   DialogCancellationAccom,
   DialogCancellationAccomProps,
@@ -39,7 +38,7 @@ const isExcursion = (
   return 'excursionName' in data;
 };
 
-export const CancellationsList = (props: DialogCancellationListProps) => {
+export function CancellationsList(props: DialogCancellationListProps) {
   const { cancellations } = props;
   return (
     <>
@@ -54,7 +53,7 @@ export const CancellationsList = (props: DialogCancellationListProps) => {
       })}
     </>
   );
-};
+}
 
 /**
  * DialogCancellationList is a component that allows the user to display the cancellations.
@@ -67,10 +66,10 @@ export const CancellationsList = (props: DialogCancellationListProps) => {
  * @param props - The props for the DialogCancellationList component.
  * @returns The DialogCancellationList component.
  */
-export const DialogCancellationList: React.FC<DialogCancellationListProps> = (props) => {
+export function DialogCancellationList(props: DialogCancellationListProps) {
   return (
     <DialogContentPolicy>
       <CancellationsList {...props} />
     </DialogContentPolicy>
   );
-};
+}

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

@@ -28,7 +28,7 @@ export interface DialogContentPolicyProps {
  * @param props - The props for the DialogContentPolicy component.
  * @returns The DialogContentPolicy component.
  */
-export const DialogContentPolicy = (props: DialogContentPolicyProps) => {
+export function DialogContentPolicy(props: DialogContentPolicyProps) {
   const { children, onSubmit } = props;
   const [accepted, setAccepted] = useState<boolean>(false);
 
@@ -54,7 +54,7 @@ export const DialogContentPolicy = (props: DialogContentPolicyProps) => {
       </div>
     </div>
   );
-};
+}
 
 DialogContentPolicy.Accommodation = DialogCancellationAccom;
 DialogContentPolicy.Excursion = DialogCancellationExcursion;

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

@@ -7,7 +7,7 @@ export interface FromToProps {
   transferType?: string;
 }
 
-const FromTo: React.FC<Omit<FromToProps, 'transferType'>> = (props) => {
+function FromTo(props: Omit<FromToProps, 'transferType'>) {
   const { from, to } = props;
 
   const getTransferLocationName = (location?: string) => {
@@ -26,6 +26,6 @@ const FromTo: React.FC<Omit<FromToProps, 'transferType'>> = (props) => {
       </Text>
     </div>
   );
-};
+}
 
 export default FromTo;

package/src/components/molecules/GlobalAmenities/GlobalAmenities.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import CardServiceAccom from '../../atoms/CardServiceAccom/CardServiceAccom';
 import Chip from '../../atoms/Chip/Chip';
 import { Text } from '../../atoms/Typography/Typography';
@@ -12,7 +11,7 @@ export interface GlobalAmenitiesProps {
   amenities: GlobalAmenity[];
 }
 
-export const GlobalAmenities: React.FC<GlobalAmenitiesProps> = (props) => {
+export function GlobalAmenities(props: GlobalAmenitiesProps) {
   const { amenities } = props;
   return (
     <CardServiceAccom className="space-y-4" withBorderLeft>
@@ -32,4 +31,4 @@ export const GlobalAmenities: React.FC<GlobalAmenitiesProps> = (props) => {
       </div>
     </CardServiceAccom>
   );
-};
+}

package/src/components/molecules/PaxChips/PaxChips.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Chip from '../../atoms/Chip/Chip';
 
 export interface PaxCount {
@@ -12,7 +11,7 @@ export interface PaxChipsProps {
   pax: PaxCount;
 }
 
-export const PaxChips: React.FC<PaxChipsProps> = (props) => {
+export function PaxChips(props: PaxChipsProps) {
   const { pax } = props;
   return (
     <div className="flex flex-wrap gap-2">
@@ -27,4 +26,4 @@ export const PaxChips: React.FC<PaxChipsProps> = (props) => {
       ))}
     </div>
   );
-};
+}

package/src/components/molecules/PaxDisplay/PaxDisplay.tsx

@@ -15,7 +15,7 @@ const paxLabel: Record<keyof BookingPax, string> = {
   infant: 'Infant',
 };
 
-export const PaxDisplay: React.FC<PaxDisplayProps> = (props) => {
+export function PaxDisplay(props: PaxDisplayProps) {
   const { pax } = props;
   return (
     <div className="pax-display">
@@ -56,4 +56,4 @@ export const PaxDisplay: React.FC<PaxDisplayProps> = (props) => {
       ))}
     </div>
   );
-};
+}

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

@@ -13,7 +13,7 @@ export interface ServiceTitleProps {
   iconSize?: IconBaseProps['size'];
 }
 
-export const ServiceTitle: React.FC<ServiceTitleProps> = (props) => {
+export function ServiceTitle(props: ServiceTitleProps) {
   const {
     title,
     textSize = 'md',
@@ -34,4 +34,4 @@ export const ServiceTitle: React.FC<ServiceTitleProps> = (props) => {
       <span>{title}</span>
     </Text>
   );
-};
+}

package/src/components/molecules/StepperTimeline/StepperTimeline.tsx

@@ -23,7 +23,7 @@ export interface StepperTimelineProps {
   onChange?: (step: StepperTimelineItem, index: number) => void;
 }
 
-const StepperTimelineItem: React.FC<StepperTimelineItemProps> = (props) => {
+function StepperTimelineItem(props: StepperTimelineItemProps) {
   const { label, current, index, textAlign = 'center', onChange } = props;
   return (
     <div className="stepper-timeline-item">
@@ -47,7 +47,7 @@ const StepperTimelineItem: React.FC<StepperTimelineItemProps> = (props) => {
       </div>
     </div>
   );
-};
+}
 
 export function StepperTimeline(props: StepperTimelineProps) {
   const { steps, className, currentIndex = 0, onChange } = props;

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

@@ -14,7 +14,7 @@ export interface DetailsColProps {
   className?: string;
 }
 
-export const DetailsCol: React.FC<DetailsColProps> = (props) => {
+export function DetailsCol(props: DetailsColProps) {
   const { data, className } = props;
 
   return (
@@ -26,4 +26,4 @@ export const DetailsCol: React.FC<DetailsColProps> = (props) => {
       ))}
     </div>
   );
-};
+}

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

@@ -15,7 +15,7 @@ export interface ItemColProps {
   children?: React.ReactNode;
 }
 
-export const ItemCol: React.FC<ItemColProps> = (props) => {
+export function ItemCol(props: ItemColProps) {
   const {
     serviceType,
     serviceName,
@@ -65,4 +65,4 @@ export const ItemCol: React.FC<ItemColProps> = (props) => {
       )}
     </div>
   );
-};
+}

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

@@ -1,5 +1,5 @@
 import { differenceInDays } from 'date-fns';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { DetailsCol as DetailsColComponent } from './DetailsCol';
 import { ItemCol, ItemColProps } from './ItemCol';
 
@@ -24,7 +24,7 @@ export function RowAccommodation() {
   return <></>;
 }
 
-const DetailsCol: React.FC<RowAccommodationProps> = (props) => {
+function DetailsCol(props: RowAccommodationProps) {
   const { data, index = 0 } = props;
 
   const stay = useMemo(() => {
@@ -39,18 +39,28 @@ const DetailsCol: React.FC<RowAccommodationProps> = (props) => {
       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: '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) => {
+function FirstCol(props: Omit<ItemColProps, 'serviceType'>) {
   const { serviceName, offers, status } = props;
 
-  return <ItemCol serviceType="Accommodation" serviceName={serviceName} offers={offers} status={status} />;
-};
+  return (
+    <ItemCol
+      serviceType="Accommodation"
+      serviceName={serviceName}
+      offers={offers}
+      status={status}
+    />
+  );
+}
 
 RowAccommodation.FirstCol = FirstCol;
 RowAccommodation.DetailsCol = DetailsCol;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { DetailsCol as DetailsColComponent } from './DetailsCol';
 import { ItemCol, ItemColProps } from './ItemCol';
 
@@ -15,7 +14,7 @@ export function RowExcursion() {
   return <></>;
 }
 
-export const DetailsCol: React.FC<RowExcursionProps> = (props) => {
+export function DetailsCol(props: RowExcursionProps) {
   const { data } = props;
 
   return (
@@ -28,13 +27,20 @@ export const DetailsCol: React.FC<RowExcursionProps> = (props) => {
       ]}
     />
   );
-};
+}
 
-const FirstCol: React.FC<Omit<ItemColProps, 'serviceType' | 'status'>> = (props) => {
+function FirstCol(props: Omit<ItemColProps, 'serviceType' | 'status'>) {
   const { serviceName, offers } = props;
 
-  return <ItemCol serviceType="Excursion" serviceName={serviceName} offers={offers} iconName="map" />;
-};
+  return (
+    <ItemCol
+      serviceType="Excursion"
+      serviceName={serviceName}
+      offers={offers}
+      iconName="map"
+    />
+  );
+}
 
 RowExcursion.FirstCol = FirstCol;
 RowExcursion.DetailsCol = DetailsCol;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
 import { TooltipDisplay } from '../TooltipDisplay/TooltipDisplay';
@@ -9,7 +8,7 @@ export function RowOtherServices() {
   return <></>;
 }
 
-export const DetailsCol = () => {
+export function DetailsCol() {
   return (
     <DetailsColComponent
       data={[
@@ -34,9 +33,9 @@ export const DetailsCol = () => {
       ]}
     />
   );
-};
+}
 
-const FirstCol: React.FC<Omit<ItemColProps, 'serviceType' | 'status'>> = (props) => {
+function FirstCol(props: Omit<ItemColProps, 'serviceType' | 'status'>) {
   return (
     <ItemCol
       serviceType="Other Services"
@@ -45,7 +44,7 @@ const FirstCol: React.FC<Omit<ItemColProps, 'serviceType' | 'status'>> = (props)
       showName={false}
     />
   );
-};
+}
 
 RowOtherServices.FirstCol = FirstCol;
 RowOtherServices.DetailsCol = DetailsCol;