mautourco-components 0.2.28 → 0.2.30

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

@@ -0,0 +1,242 @@
+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 {
+  DetailResumeAccommodation,
+  DetailResumeExcursion,
+  DetailResumeItem,
+  DetailResumeOtherService,
+  DetailResumeTransfer,
+  ServiceType,
+} from '@/src/types/table';
+import { RowAccommodation } from '../../../molecules/TableServiceItem/RowAccommodation';
+import { RowExcursion } from '../../../molecules/TableServiceItem/RowExcursion';
+import { RowOtherServices } from '../../../molecules/TableServiceItem/RowOtherServices';
+import { RowTransfer } from '../../../molecules/TableServiceItem/RowTransfer';
+import { ColumnType } from '../TableCell';
+
+export const bookingCancelServiceColumns: (params?: {
+  onRemove?: (value: DetailResumeItem, index?: number, childIndex?: number) => void;
+}) => ColumnType<DetailResumeItem>[] = (params) => {
+  const { onRemove } = params || {};
+  return [
+    {
+      header: 'Item',
+      key: 'Type',
+      width: 260,
+      cell: (value, raw) => {
+        if (value === ServiceType.ACCOMMODATION) {
+          const accom = raw as DetailResumeAccommodation;
+          return (
+            <RowAccommodation.FirstCol
+              serviceName={accom.HotelName as string}
+              offers={accom.Offers}
+              status={accom.RoomStatus}
+            />
+          );
+        }
+        if (value === ServiceType.EXCURSION) {
+          const excursion = raw as DetailResumeExcursion;
+          return (
+            <RowExcursion.FirstCol serviceName={excursion.ExcursionName as string} />
+          );
+        }
+        if (value === ServiceType.TRANSFER) {
+          const transfer = raw as DetailResumeTransfer;
+          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: 185,
+      cell: (value, raw, index) => {
+        if (value === ServiceType.ACCOMMODATION) {
+          const accom = raw as DetailResumeAccommodation;
+          return (
+            <RowAccommodation.DetailsCol
+              data={{
+                RoomName: accom.RoomName,
+                Dates: accom.Dates,
+                ClientCategory: accom.ClientCategory,
+                MealPlan: accom.MealPlan,
+              }}
+              index={(index || 0) + 1}
+            />
+          );
+        }
+        if (value === ServiceType.EXCURSION) {
+          const excursion = raw as DetailResumeExcursion;
+          return (
+            <RowExcursion.DetailsCol
+              data={{
+                languages: excursion.AvailableLanguages,
+                duration: excursion.Duration,
+                accessibility: excursion.Accessibility,
+                transferType: excursion.TransferType,
+              }}
+            />
+          );
+        }
+        if (value === ServiceType.TRANSFER) {
+          const transfer = raw as DetailResumeTransfer;
+          return (
+            <RowTransfer.DetailsCol
+              data={{
+                carType: transfer.VehicleTypeName,
+                clientType: 'STD',
+              }}
+            />
+          );
+        }
+        if (value === ServiceType.OTHER_SERVICE) {
+          return <RowOtherServices.DetailsCol />;
+        }
+        return <></>;
+      },
+    },
+    {
+      header: 'Date',
+      key: 'Type',
+      width: 185,
+      cell: (value, raw) => {
+        let date: string[] = [];
+        switch (value) {
+          case ServiceType.ACCOMMODATION:
+            const accom = raw as DetailResumeAccommodation;
+            date = accom.Dates as string[];
+            break;
+          case ServiceType.EXCURSION:
+            const excursion = raw as DetailResumeExcursion;
+            date = [excursion.ServiceDate];
+            break;
+          case ServiceType.TRANSFER:
+            const transfer = raw as DetailResumeTransfer;
+            date = [transfer.TransferDate];
+            break;
+          case ServiceType.OTHER_SERVICE:
+            const otherService = raw as DetailResumeOtherService;
+            date = [otherService.service_date];
+            break;
+        }
+        return <DateDisplay dates={date} direction="vertical" />;
+      },
+    },
+    {
+      header: 'No. of pax',
+      key: 'Type',
+      width: 329,
+      cell: (value, raw) => {
+        const pax: Record<'Adult' | 'Teen' | 'Infant' | 'Child', number | undefined> = {
+          Adult: 0,
+          Teen: 0,
+          Infant: 0,
+          Child: 0,
+        };
+
+        switch (value) {
+          case ServiceType.ACCOMMODATION:
+          case ServiceType.EXCURSION:
+          case ServiceType.TRANSFER:
+            const item = raw as
+              | DetailResumeAccommodation
+              | DetailResumeExcursion
+              | DetailResumeTransfer;
+            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;
+            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>
+        );
+      },
+    },
+    {
+      header: 'Price',
+      key: 'Type',
+      width: 230,
+      cell: (value, raw, index = 0, childIndex = 0) => {
+        let total: Record<'currency' | 'total', string | undefined> = {
+          currency: undefined,
+          total: undefined,
+        };
+
+        switch (value) {
+          case ServiceType.ACCOMMODATION:
+            const accom = raw as DetailResumeAccommodation;
+            total.currency = accom.Currency;
+            total.total = accom.Total;
+            break;
+          case ServiceType.EXCURSION:
+          case ServiceType.TRANSFER:
+            const item = raw as DetailResumeExcursion | DetailResumeTransfer;
+            total.currency = item.Currency;
+            total.total = item.TotalPrice;
+            break;
+          case ServiceType.OTHER_SERVICE:
+            const otherService = raw as DetailResumeOtherService;
+            total.currency = otherService.currency;
+            total.total = otherService.total_price;
+            break;
+        }
+
+        const showRemoveButton =
+          onRemove && raw.Type !== ServiceType.OTHER_SERVICE && childIndex === 0;
+
+        return (
+          <div className="flex items-center justify-between">
+            <Text size="sm" variant="bold">
+              {total.currency} {total.total}
+            </Text>
+            {showRemoveButton && (
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={() => onRemove(raw, index, childIndex)}>
+                Remove
+              </Button>
+            )}
+          </div>
+        );
+      },
+    },
+  ];
+};

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

@@ -1,3 +1,4 @@
+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';
@@ -15,7 +16,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',
@@ -190,7 +194,7 @@ export const detailResumeColumns: () => ColumnType<DetailResumeItem>[] = () => {
       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 +220,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">
+              {total.currency} {total.total}
+            </Text>
+            {onRemove && (
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={() => onRemove(raw, index)}>
+                Remove
+              </Button>
+            )}
+          </div>
         );
       },
     },

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

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

package/src/components/organisms/TransferLine/TransferLine.tsx

@@ -1,14 +1,14 @@
-import React, { useState, useCallback, useRef, useEffect } from "react";
+import React, { useState } from "react";
+import "../../../styles/components/organism/transfer-line.css";
 import Icon from "../../atoms/Icon/Icon";
 import { Text } from "../../atoms/Typography/Typography";
-import PaxSelector, { PaxData } from "../PaxSelector/PaxSelector";
-import DateTimePicker from "../DateTimePicker/DateTimePicker";
 import LocationDropdown, {
-  LocationOption,
-  LocationGroup,
-  LocationData,
+    LocationData,
+    LocationGroup,
+    LocationOption,
 } from "../../molecules/LocationDropdown/LocationDropdown";
-import "../../../styles/components/organism/transfer-line.css";
+import DateTimePicker from "../DateTimePicker/DateTimePicker";
+import PaxSelector, { PaxData } from "../PaxSelector/PaxSelector";
 
 export type TransferType = "arrival" | "departure" | "inter-hotel";
 
@@ -60,6 +60,8 @@ export interface TransferLineProps {
   showTitle?: boolean;
   /** Additional CSS classes */
   className?: string;
+  /** Whether to check if inputs are empty */
+  checkEmpty?: boolean;
 }
 
 const TransferLine: React.FC<TransferLineProps> = ({
@@ -77,8 +79,9 @@ const TransferLine: React.FC<TransferLineProps> = ({
   onDataChange,
   onDelete,
   showDelete = true,
-  showTitle = false,
+    showTitle = false,
   className = "",
+  checkEmpty = false,
 }) => {
   const [internalPaxData, setInternalPaxData] = useState<PaxData | undefined>(
     paxData
@@ -257,6 +260,19 @@ const TransferLine: React.FC<TransferLineProps> = ({
     onDropoffChange?.(location);
   };
 
+  // Check if inputs are empty (when checkEmpty is true)
+  const isPaxEmpty = checkEmpty && (!internalPaxData || 
+    (internalPaxData.adults === 0 && 
+     internalPaxData.teens === 0 && 
+     internalPaxData.children === 0 && 
+     (internalPaxData.infants === undefined || internalPaxData.infants === 0)));
+
+  const isDateEmpty = checkEmpty && (!internalTransferDate || internalTransferDate === '');
+
+  const isPickupEmpty = checkEmpty && !internalPickupPoint;
+
+  const isDropoffEmpty = checkEmpty && !internalDropoffPoint;
+
   return (
     <div
       className={`transfer-line transfer-line--${type} ${className}`}
@@ -284,12 +300,13 @@ const TransferLine: React.FC<TransferLineProps> = ({
       <div className="transfer-line__content-container">
         <div className="transfer-line__content">
           {/* Number of pax */}
-          <div className="transfer-line__field transfer-line__field--pax">
+          <div className={`transfer-line__field transfer-line__field--pax ${isPaxEmpty ? 'transfer-line__field--error' : ''}`}>
             <PaxSelector
               label="Number of pax"
               value={internalPaxData}
               onChange={handlePaxChange}
               placeholder="2 pax"
+              className={isPaxEmpty ? 'pax-selector--error' : ''}
             />
           </div>
 
@@ -311,7 +328,9 @@ const TransferLine: React.FC<TransferLineProps> = ({
               showChevron={true}
               onValueChange={handleDateChange}
               selectionMode="single"
-              defaultValue={transferDate}
+              defaultValue={internalTransferDate}
+              inputClassName="transfer-line__date-picker"
+              state={isDateEmpty ? 'error' : undefined}
             />
           </div>
 
@@ -327,6 +346,7 @@ const TransferLine: React.FC<TransferLineProps> = ({
               direction="pickup"
               type={type === 'inter-hotel' ? 'accommodation' : type === 'arrival' ? 'airport-port' : 'accommodation'}
               showGroupTitles={false}
+              error={isPickupEmpty}
             />
           </div>
 
@@ -342,6 +362,7 @@ const TransferLine: React.FC<TransferLineProps> = ({
               direction="dropoff"
               type={type === 'inter-hotel' ? 'accommodation' : type === 'departure' ? 'airport-port' : 'accommodation'}
               showGroupTitles={false}
+              error={isDropoffEmpty}
             />
           </div>
         </div>

package/src/components/ui/popover.tsx

@@ -13,15 +13,14 @@ function PopoverTrigger({
   return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
-function PopoverContent({
-  className,
-  align = 'center',
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => {
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
+        ref={ref}
         data-slot="popover-content"
         align={align}
         sideOffset={sideOffset}
@@ -33,7 +32,8 @@ function PopoverContent({
       />
     </PopoverPrimitive.Portal>
   );
-}
+});
+PopoverContent.displayName = 'PopoverContent';
 
 function PopoverAnchor({
   ...props

package/src/styles/components/molecule/calendarInput.css

@@ -83,6 +83,27 @@
   @apply bg-[var(--color-atoll-green-800)];
 }
 
+/* Empty state (no value) - matches Figma design */
+.calendar-input--empty {
+  @apply border-[#7f8594];
+}
+
+.calendar-input--empty .calendar-input__field::placeholder {
+  @apply text-[#7f8594];
+}
+
+.calendar-input--empty:not(.calendar-input--disabled) .calendar-input__field {
+  @apply text-[#7f8594];
+}
+
+.calendar-input--empty:not(.calendar-input--disabled) .calendar-input__icon-button:not(.calendar-input__icon-button--full-bg) {
+  @apply text-[#7f8594];
+}
+
+.calendar-input--empty:not(.calendar-input--disabled) .calendar-input__chevron {
+  @apply text-[#7f8594];
+}
+
 /* Active state (focused) */
 .calendar-input--active {
   @apply border-[var(--color-neutral-800)];
@@ -112,19 +133,27 @@
 
 /* Error state */
 .calendar-input--error {
-  @apply border-[var(--color-coral-red-600)] bg-[var(--color-coral-red-200)];
+  @apply border-[var(--color-red-600,#dc2626)] bg-[var(--color-coral-red-50,#fff8f8)];
 }
 
 .calendar-input--error .calendar-input__field {
-  @apply text-[var(--color-coral-red-600)];
+  @apply text-[var(--color-coral-red-600,#f83b3b)];
+}
+
+.calendar-input--error .calendar-input__field::placeholder {
+  @apply text-[var(--color-coral-red-600,#f83b3b)];
 }
 
 .calendar-input--error .calendar-input__icon-button {
-  @apply !bg-none !text-[var(--color-coral-red-600)];
+  @apply !bg-none !text-[var(--color-coral-red-600,#f83b3b)];
 }
 
 .calendar-input--error .calendar-input__icon-button--full-bg {
-  @apply bg-[var(--color-coral-red-600)] !text-white;
+  @apply bg-[var(--color-coral-red-600,#f83b3b)] !text-white;
+}
+
+.calendar-input--error .calendar-input__chevron {
+  @apply !text-[var(--color-coral-red-600,#f83b3b)];
 }
 
 /* Disabled state */

package/src/styles/components/molecule/location-dropdown.css

@@ -64,16 +64,18 @@
 }
 
 .location-dropdown__input--error {
-  @apply border-[var(--color-coral-red-600)] bg-[var(--color-coral-red-50)];
+  @apply border-[var(--color-red-600,#dc2626)] bg-[var(--color-coral-red-50,#fff8f8)];
 }
 
-.location-dropdown__input--error .location-dropdown__input-text {
-  @apply text-[var(--color-coral-red-600)];
+.location-dropdown__input--error .location-dropdown__input-text,
+.location-dropdown__input--error .location-dropdown__input-text--placeholder {
+  @apply text-[var(--color-coral-red-600,#f83b3b)];
 }
 
 .location-dropdown__input--error .location-dropdown__input-icon,
+.location-dropdown__input--error .location-dropdown__input-icon--placeholder,
 .location-dropdown__input--error .location-dropdown__input-chevron {
-  @apply text-[var(--color-coral-red-600)];
+  @apply text-[var(--color-coral-red-600,#f83b3b)];
 }
 
 .location-dropdown__input--disabled {

package/src/styles/components/molecule/toast.css

@@ -0,0 +1,93 @@
+/* Toast Component Styles */
+
+.toast {
+  @apply flex flex-row items-stretch overflow-hidden border border-l-8;
+  border-radius: 4px;
+}
+
+.toast__leading-block {
+  @apply shrink-0;
+  width: 8px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.toast__container {
+  @apply flex items-center flex-1 min-w-0;
+  gap: 8px;
+  padding: 12px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.toast__icon-wrapper {
+  @apply shrink-0 relative flex items-center justify-center;
+  width: 24px;
+  height: 24px;
+}
+
+.toast__icon {
+  @apply w-full h-full;
+}
+
+.toast__text {
+  @apply flex-1 min-w-0;
+}
+
+/* Informational Toast */
+.toast--informational {
+  @apply border-[var(--color-blue-600,#1e40af)];
+}
+
+.toast--informational .toast__container {
+  @apply bg-[var(--color-blue-100,#dbeafe)];
+}
+
+.toast--informational .toast__icon,
+.toast--informational .toast__text {
+  @apply text-[var(--color-blue-600,#1e40af)];
+}
+
+/* Success Toast */
+.toast--success {
+  @apply border-[var(--color-green-600,#166534)];
+}
+
+
+.toast--success .toast__container {
+  @apply bg-[var(--color-green-50,#f0fdf4)];
+}
+
+.toast--success .toast__icon,
+.toast--success .toast__text {
+  @apply text-[var(--color-green-600,#166534)];
+}
+
+/* Warning Toast */
+.toast--warning {
+  @apply border-[var(--color-orange-600,#fc6613)];
+}
+
+.toast--warning .toast__container {
+  @apply bg-[var(--color-sandy-brown-100,#fff6ed)];
+}
+
+.toast--warning .toast__icon,
+.toast--warning .toast__text {
+  @apply text-[var(--color-orange-600,#fc6613)];
+}
+
+/* Danger Toast */
+.toast--danger {
+  @apply border-[var(--color-red-600,#a01414)];
+}
+
+.toast--danger .toast__container {
+  @apply bg-[var(--color-coral-red-50,#fff8f8)];
+}
+
+.toast--danger .toast__icon,
+.toast--danger .toast__text {
+  @apply text-[var(--color-red-600,#a01414)];
+}
+

package/src/styles/components/organism/docket.css

@@ -1,7 +1,11 @@
+.docket__container {
+  width: fit-content;
+}
+
 .docket {
   @apply flex flex-col gap-6 p-6;
   width: 384px;
-  min-height: 724px;
+  height: fit-content;
   background: var(--color-elevation-level-1, #ffffff);
   border: var(--border-border, 1px) solid var(--color-border-subtle, #e5e5e5);
   border-radius: var(--border-radius-lg, 8px);

package/src/styles/components/organism/pax-selector.css

@@ -21,7 +21,7 @@
 .pax-selector__label {
   font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
   font-size: 14px;
-  line-height: 20px;
+  line-height: 1.5;
   color: var(--input-color-label-default, #262626);
 }
 
@@ -45,6 +45,17 @@
   border-color: var(--color-text-default, #262626);
 }
 
+.pax-selector--error .pax-selector__input {
+  border-color: var(--color-red-600, #dc2626);
+  background: var(--color-coral-red-50, #fff8f8);
+}
+
+.pax-selector--error .pax-selector__input-text,
+.pax-selector--error .pax-selector__input-icon,
+.pax-selector--error .pax-selector__chevron {
+  color: var(--color-coral-red-600, #f83b3b);
+}
+
 .pax-selector__input-content {
   display: flex;
   align-items: center;

package/src/styles/components/organism/round-trip.css

@@ -53,3 +53,7 @@
     flex: 0 0 calc(50% - 6px);
   }
 }
+
+.round-trip__date-picker--input {
+    @apply !h-11;
+}

package/src/styles/components/organism/transfer-line.css

@@ -32,7 +32,7 @@
 }
 
 .transfer-line__field p {
-  @apply leading-5;
+  line-height: 1.5;
 }
 
 /* Mobile layout - stack fields vertically */
@@ -84,3 +84,7 @@
 .transfer-line__delete-icon {
   @apply text-[var(--color-neutral-800)];
 }
+
+.transfer-line__date-picker {
+  @apply h-11;
+}