mautourco-components 0.2.29 → 0.2.31

package/src/components/organisms/Table/columns/booking-columns.tsx

@@ -1,8 +1,8 @@
 import Button from '@/src/components/atoms/Button/Button';
-import Chip from '@/src/components/atoms/Chip/Chip';
 import { Text } from '@/src/components/atoms/Typography/Typography';
 import { ActionDropdown } from '@/src/components/molecules/ActionDropdown/ActionDropdown';
 import { DateDisplay } from '@/src/components/molecules/DateDisplay/DateDisplay';
+import { PaxChips } from '@/src/components/molecules/PaxChips/PaxChips';
 import { ActionDropdownType } from '@/src/types/table';
 import { BookingListItem } from '@/src/types/table/booking.types';
 import { ColumnType } from '../TableCell';
@@ -61,24 +61,7 @@ export const bookingColumns: (params: {
       const paxDetails = value as BookingListItem['pax_details'];
       const paxDetailsKeys = Object.keys(paxDetails);
       if (paxDetailsKeys.length) {
-        return (
-          <div className="flex flex-wrap gap-2">
-            {paxDetailsKeys.map((key) => {
-              return (
-                <Chip
-                  label={`${key} ${paxDetails[key as keyof BookingListItem['pax_details']]}`}
-                  type={
-                    paxDetails[key as keyof BookingListItem['pax_details']] > 0
-                      ? 'filled'
-                      : 'outline'
-                  }
-                  color="accent"
-                  size="sm"
-                />
-              );
-            })}
-          </div>
-        );
+        return <PaxChips pax={paxDetails} />;
       }
       return <></>;
     },

package/src/components/organisms/Table/columns/comparison-columns.tsx

@@ -0,0 +1,140 @@
+import { Text } from '@/src/components/atoms/Typography/Typography';
+import { RowAccommodation } from '@/src/components/molecules/TableServiceItem/RowAccommodation';
+import { RowExcursion } from '@/src/components/molecules/TableServiceItem/RowExcursion';
+import { RowOtherServices } from '@/src/components/molecules/TableServiceItem/RowOtherServices';
+import { RowTransfer } from '@/src/components/molecules/TableServiceItem/RowTransfer';
+import { priceFormatter } from '@/src/lib/price-formatter';
+import { ServiceType } from '@/src/types/table';
+import {
+  ComparisonData,
+  isComparisonAccommodation,
+  isComparisonExcursion,
+  isComparisonOtherService,
+  isComparisonTransfer,
+} from '../../DialogComparison/DialogComparison';
+import { ColumnType } from '../TableCell';
+
+const COLUMNS_WIDTH = 532 / 3;
+
+export const comparisonColumns: () => ColumnType<ComparisonData>[] = () => {
+  return [
+    {
+      header: 'Item',
+      key: 'Type',
+      width: COLUMNS_WIDTH,
+      cell: (value, raw) => {
+        if (isComparisonAccommodation(raw)) {
+          const accom = raw;
+          return (
+            <RowAccommodation.FirstCol
+              serviceName={raw.HotelName as string}
+              offers={raw.Offers}
+              status={raw.RoomStatus}
+            />
+          );
+        }
+        if (isComparisonExcursion(raw)) {
+          return <RowExcursion.FirstCol serviceName={raw.ExcursionName as string} />;
+        }
+        if (isComparisonTransfer(raw)) {
+          const transfer = raw;
+          return (
+            <RowTransfer.FirstCol
+              serviceName={transfer.VehicleTypeName as string}
+              transferType={transfer.TransferType}
+              from={transfer.LocationFromName}
+              to={transfer.LocationToName}
+            />
+          );
+        }
+
+        if (value === ServiceType.OTHER_SERVICE) {
+          return <RowOtherServices.FirstCol />;
+        }
+        return <></>;
+      },
+    },
+    {
+      header: 'Details',
+      key: 'Type',
+      width: COLUMNS_WIDTH,
+      cell: (value, raw, index) => {
+        if (isComparisonAccommodation(raw)) {
+          return (
+            <RowAccommodation.DetailsCol
+              data={{
+                RoomName: raw.RoomName,
+                Dates: raw.Dates,
+                ClientCategory: raw.ClientCategory,
+                MealPlan: raw.MealPlan,
+              }}
+              index={(index || 0) + 1}
+            />
+          );
+        }
+        if (isComparisonExcursion(raw)) {
+          return (
+            <RowExcursion.DetailsCol
+              data={{
+                languages: raw.AvailableLanguages,
+                duration: raw.Duration,
+                accessibility: raw.Accessibility,
+                transferType: raw.TransferType,
+              }}
+            />
+          );
+        }
+        if (isComparisonTransfer(raw)) {
+          return (
+            <RowTransfer.DetailsCol
+              data={{
+                carType: raw.VehicleTypeName,
+                clientType: 'STD',
+              }}
+            />
+          );
+        }
+        if (value === ServiceType.OTHER_SERVICE) {
+          return <RowOtherServices.DetailsCol />;
+        }
+        return <></>;
+      },
+    },
+    {
+      header: 'Price',
+      key: 'Type',
+      width: COLUMNS_WIDTH,
+      cell: (_value, raw) => {
+        let total: Record<'currency' | 'total', string | undefined> = {
+          currency: undefined,
+          total: undefined,
+        };
+
+        if (isComparisonAccommodation(raw)) {
+          total.currency = raw.Currency;
+          total.total = raw.Total;
+        }
+        if (isComparisonExcursion(raw)) {
+          total.currency = raw.Currency;
+          total.total = raw.TotalPrice;
+        }
+        if (isComparisonTransfer(raw)) {
+          total.currency = raw.Currency;
+          total.total = raw.TotalPrice;
+        }
+        if (isComparisonOtherService(raw)) {
+          total.currency = raw.currency;
+          total.total = raw.total_price;
+        }
+
+        return (
+          <div className="flex items-center justify-between">
+            <Text size="sm" variant="bold">
+              {priceFormatter(total.total, total.currency)}
+            </Text>
+          </div>
+        );
+      },
+    },
+  ];
+};

package/src/components/organisms/Table/columns/detail-resume-columns.tsx

@@ -1,6 +1,8 @@
-import Chip from '@/src/components/atoms/Chip/Chip';
+import Button from '@/src/components/atoms/Button/Button';
 import { Text } from '@/src/components/atoms/Typography/Typography';
 import { DateDisplay } from '@/src/components/molecules/DateDisplay/DateDisplay';
+import { PaxChips, PaxCount } from '@/src/components/molecules/PaxChips/PaxChips';
+import { priceFormatter } from '@/src/lib/price-formatter';
 import {
   DetailResumeAccommodation,
   DetailResumeExcursion,
@@ -15,7 +17,10 @@ import { RowOtherServices } from '../../../molecules/TableServiceItem/RowOtherSe
 import { RowTransfer } from '../../../molecules/TableServiceItem/RowTransfer';
 import { ColumnType } from '../TableCell';
 
-export const detailResumeColumns: () => ColumnType<DetailResumeItem>[] = () => {
+export const detailResumeColumns: (params?: {
+  onRemove?: (value: DetailResumeItem, index?: number) => void;
+}) => ColumnType<DetailResumeItem>[] = (params) => {
+  const { onRemove } = params || {};
   return [
     {
       header: 'Item',
@@ -138,11 +143,11 @@ export const detailResumeColumns: () => ColumnType<DetailResumeItem>[] = () => {
       key: 'Type',
       width: 396,
       cell: (value, raw) => {
-        const pax: Record<'Adult' | 'Teen' | 'Infant' | 'Child', number | undefined> = {
-          Adult: 0,
-          Teen: 0,
-          Infant: 0,
-          Child: 0,
+        const pax: Record<'adult' | 'teen' | 'infant' | 'child', number | undefined> = {
+          adult: 0,
+          teen: 0,
+          infant: 0,
+          child: 0,
         };
 
         switch (value) {
@@ -153,44 +158,27 @@ export const detailResumeColumns: () => ColumnType<DetailResumeItem>[] = () => {
               | DetailResumeAccommodation
               | DetailResumeExcursion
               | DetailResumeTransfer;
-            pax.Adult = item.AdultCount;
-            pax.Teen = item.TeenCount;
-            pax.Infant = item.InfantCount;
-            pax.Child = item.ChildCount;
+            pax.adult = item.AdultCount;
+            pax.teen = item.TeenCount;
+            pax.infant = item.InfantCount;
+            pax.child = item.ChildCount;
             break;
           case ServiceType.OTHER_SERVICE:
             const otherService = raw as DetailResumeOtherService;
-            pax.Adult = otherService.adult_pax;
-            pax.Teen = otherService.teen_pax;
-            pax.Infant = otherService.infant_pax;
-            pax.Child = otherService.child_pax;
+            pax.adult = otherService.adult_pax;
+            pax.teen = otherService.teen_pax;
+            pax.infant = otherService.infant_pax;
+            pax.child = otherService.child_pax;
             break;
         }
-        return (
-          <div className="flex items-center gap-x-3">
-            {Object.keys(pax).map((k, index) => {
-              const count = pax[k as keyof typeof pax] ?? 0;
-              const type = count > 0 ? 'filled' : 'outline';
-              return (
-                <Chip
-                  key={`pax-${index}`}
-                  label={`${k} ${count}`}
-                  size="sm"
-                  color="accent"
-                  type={type}
-                  className="!px-3"
-                />
-              );
-            })}
-          </div>
-        );
+        return <PaxChips pax={pax as PaxCount} />;
       },
     },
     {
       header: 'Price',
       key: 'Type',
       width: 299,
-      cell: (value, raw) => {
+      cell: (value, raw, index) => {
         let total: Record<'currency' | 'total', string | undefined> = {
           currency: undefined,
           total: undefined,
@@ -216,9 +204,19 @@ export const detailResumeColumns: () => ColumnType<DetailResumeItem>[] = () => {
         }
 
         return (
-          <Text size="sm" variant="bold">
-            {total.currency} {total.total}
-          </Text>
+          <div className="flex items-center justify-between">
+            <Text size="sm" variant="bold">
+              {priceFormatter(total.total, total.currency)}
+            </Text>
+            {onRemove && (
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={() => onRemove(raw, index)}>
+                Remove
+              </Button>
+            )}
+          </div>
         );
       },
     },

package/src/components/organisms/Table/columns/index.ts

@@ -1,4 +1,6 @@
+import { bookingCancelServiceColumns } from './booking-cancel-service-columns';
 import { bookingColumns } from './booking-columns';
+import { comparisonColumns } from './comparison-columns';
 import { detailResumeColumns } from './detail-resume-columns';
 import { quotationColumns } from './quotation-columns';
 
@@ -6,6 +8,8 @@ const columns = {
   quotation: quotationColumns,
   detailResume: detailResumeColumns,
   booking: bookingColumns,
+  bookingCancelService: bookingCancelServiceColumns,
+  comparison: comparisonColumns,
 };
 
 export { columns };

package/src/components/organisms/Table/columns/quotation-columns.tsx

@@ -11,7 +11,10 @@ import { actionDropdownData, chipVariant, clientTypeMap } from '../constant';
 
 export const quotationColumns: (params: {
   onExpand: (value?: QuotationListItem) => void;
-  onAction: (action: ActionDropdownType) => void;
+  onAction: (data: {
+    isChild?: boolean;
+    quote: QuotationListItem;
+  }) => (action: ActionDropdownType) => void;
 }) => ColumnType<QuotationListItem>[] = ({ onExpand, onAction }) => [
   {
     header: 'Quote nb.',
@@ -27,11 +30,12 @@ export const quotationColumns: (params: {
     header: 'Client name',
     key: 'agency_name',
     width: 150,
-    cell: (value) => (
-      <Text variant="medium" size="sm">
-        {value as string}
-      </Text>
-    ),
+    cell: (value, _raw, _index, childIndex) =>
+      childIndex === undefined && (
+        <Text variant="medium" size="sm">
+          {value as string}
+        </Text>
+      ),
   },
   {
     header: 'File status',
@@ -120,7 +124,7 @@ export const quotationColumns: (params: {
     header: '',
     key: 'actions',
     width: 232,
-    cell: (_value, raw) => {
+    cell: (_value, raw, _index, childIndex) => {
       const hasChildren = raw.children && raw.children.length > 0;
       const isExpanded = raw.children?.some((child) => child.visible);
       const buttonLabel = isExpanded ? 'See less' : 'See more';
@@ -138,14 +142,18 @@ export const quotationColumns: (params: {
               {buttonLabel}
             </Button>
           ) : (
-            <div className="flex itemes-center gap-x-8">
+            <div className="flex items-center gap-x-8">
               <Button
                 variant={isOnRequest ? 'outline-secondary' : 'secondary'}
                 size="sm"
                 className="table__button">
                 {isOnRequest ? 'Request to book' : 'Book now'}
               </Button>
-              <ActionDropdown data={actionDropdownData(onAction)} />
+              <ActionDropdown
+                data={actionDropdownData(
+                  onAction({ isChild: childIndex !== undefined, quote: raw })
+                )}
+              />
             </div>
           )}
         </div>

package/src/components/ui/form.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import type * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from 'react-hook-form';
+
+import { Label } from '@/src/components/ui/label';
+import { cn } from '@/src/lib/utils';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+);
+
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
+    </FormItemContext.Provider>
+  );
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn('data-[error=true]:text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? '') : props.children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn('text-[var(--color-text-state-error)] text-sm', className)}
+      {...props}>
+      {body}
+    </p>
+  );
+}
+
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
+};

package/src/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/src/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }