mautourco-components 0.2.30 → 0.2.31

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,7 +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 { 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,
@@ -142,11 +143,11 @@ export const detailResumeColumns: (params?: {
       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) {
@@ -157,37 +158,20 @@ export const detailResumeColumns: (params?: {
               | 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} />;
       },
     },
     {
@@ -222,7 +206,7 @@ export const detailResumeColumns: (params?: {
         return (
           <div className="flex items-center justify-between">
             <Text size="sm" variant="bold">
-              {total.currency} {total.total}
+              {priceFormatter(total.total, total.currency)}
             </Text>
             {onRemove && (
               <Button

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

@@ -1,5 +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';
 
@@ -8,6 +9,7 @@ const columns = {
   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 }

package/dist/components/organisms/CancelService/CancelPolicy.js

@@ -1,19 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Button from '../../atoms/Button/Button';
-import { Text } from '../../atoms/Typography/Typography';
-import { DialogCancellations, } from '../../molecules/DialogContentPolicy/DialogCancellationList';
-export var CancelPolicy = function (props) {
-    var cancellations = props.cancellations, isPolicyTransgressed = props.isPolicyTransgressed, isProcessing = props.isProcessing, onProceedToPayment = props.onProceedToPayment;
-    return (_jsxs("div", { children: [isPolicyTransgressed && (_jsx(Text, __assign({ color: "state-error" }, { children: "It appears that removing this item violates one or more cancellation policies. Please settle the cancellation fee if you wish to proceed with this item\u2019s cancellation." }))), _jsx("div", __assign({ className: "max-h-[400px] overflow-y-auto -mr-5 pr-2.5" }, { children: _jsx(DialogCancellations, { cancellations: cancellations }) })), _jsx("div", __assign({ className: "flex justify-end mt-9" }, { children: _jsx(Button, __assign({ variant: "secondary", size: "sm", className: "w-[250px]", disabled: isProcessing, onClick: onProceedToPayment }, { children: "Proceed to payment" })) }))] }));
-};

package/dist/components/organisms/CancelService/CancelService.js

@@ -1,23 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { DialogBookingConfirm } from '../DialogBookingConfirm';
-import { CancelPolicy } from './CancelPolicy';
-import { ConfirmDelete } from './ConfirmDelete/ConfirmDelete';
-import { FromList } from './FromList';
-export var CancelService = function (props) {
-    var open = props.open, children = props.children, title = props.title, className = props.className, setOpen = props.setOpen;
-    return (_jsx(DialogBookingConfirm, __assign({ title: title, open: open, setOpen: setOpen, className: className }, { children: children })));
-};
-CancelService.FromList = FromList;
-CancelService.Confirm = ConfirmDelete;
-CancelService.CancelPolicy = CancelPolicy;

package/dist/components/organisms/CancelService/ConfirmDelete/ConfirmDelete.js

@@ -1,35 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var _a, _b;
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Button from '../../../atoms/Button/Button';
-import FromTo from '../../../molecules/FromTo/FromTo';
-import TextWithIcon from '../../../molecules/TextWithIcon/TextWithIcon';
-import { ServiceType } from '../../../../types/table/index';
-import { Text } from '../../../atoms/Typography/Typography';
-import './ConfirmDelete.css';
-var mappedServiceIcon = (_a = {},
-    _a[ServiceType.ACCOMMODATION] = 'accom',
-    _a[ServiceType.EXCURSION] = 'map',
-    _a[ServiceType.TRANSFER] = 'car',
-    _a[ServiceType.OTHER_SERVICE] = 'wallet',
-    _a);
-var mappedServiceName = (_b = {},
-    _b[ServiceType.ACCOMMODATION] = 'Accommodation',
-    _b[ServiceType.EXCURSION] = 'Excursion',
-    _b[ServiceType.TRANSFER] = 'Transfer',
-    _b[ServiceType.OTHER_SERVICE] = 'Other Service',
-    _b);
-export var ConfirmDelete = function (props) {
-    var serviceType = props.serviceType, serviceName = props.serviceName, transferData = props.transferData, onCancel = props.onCancel, onDelete = props.onDelete;
-    return (_jsxs("div", __assign({ className: "confirm-delete" }, { children: [_jsxs("div", __assign({ className: "space-y-6" }, { children: [_jsx(Text, __assign({ size: "sm" }, { children: "Are you sure you want to delete this service:" })), _jsxs("div", __assign({ className: "confirm-delete__service" }, { children: [_jsx(TextWithIcon, __assign({ icon: mappedServiceIcon[serviceType], textSize: "sm", color: "accent", textVariant: "bold" }, { children: mappedServiceName[serviceType] })), _jsx(Text, __assign({ size: "sm", variant: "bold" }, { children: serviceName })), serviceType === ServiceType.TRANSFER && transferData && (_jsx(FromTo, { from: transferData.from, to: transferData.to }))] }))] })), _jsxs("div", __assign({ className: "confirm-delete__actions" }, { children: [_jsx(Button, __assign({ variant: "outline-secondary", onClick: onCancel, size: "sm" }, { children: "Cancel" })), _jsx(Button, __assign({ variant: "destructive", onClick: onDelete, size: "sm" }, { children: "Delete" }))] }))] })));
-};

package/dist/components/organisms/CancelService/FromList.js

@@ -1,29 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Button from '../../atoms/Button/Button';
-import { Table } from '../Table';
-import { columns as defaultColumns } from '../Table/columns';
-export var FromList = function (props) {
-    var data = props.data, columns = props.columns, totalRows = props.totalRows, onRemove = props.onRemove, onCancel = props.onCancel, onSaveAndUpdate = props.onSaveAndUpdate;
-    // When using default columns, we need to ensure T is compatible with DetailResumeItem
-    var defaultColumnsResult = columns
-        ? columns
-        : defaultColumns.bookingCancelService({
-            onRemove: onRemove
-                ? function (value, index, childIndex) {
-                    onRemove(value, index, childIndex);
-                }
-                : undefined,
-        });
-    return (_jsxs("div", __assign({ className: "pb-20" }, { children: [_jsx(Table, { columns: defaultColumnsResult, data: data, totalRows: totalRows, isGrouped: true }), _jsxs("div", __assign({ className: "flex justify-end gap-x-4 [&>*]:w-[250px] absolute bottom-0 right-2 left-0 p-6 bg-white" }, { children: [_jsx(Button, __assign({ variant: "outline-secondary", size: "sm", onClick: onCancel }, { children: "Cancel" })), _jsx(Button, __assign({ variant: "secondary", size: "sm", onClick: onSaveAndUpdate }, { children: "Save and update" }))] }))] })));
-};