mautourco-components 0.2.46 → 0.2.48

package/src/components/organisms/SearchBarTransfer/SearchBarTransfer.tsx

@@ -40,8 +40,12 @@ export interface SearchBarTransferProps {
   onSearch?: (data: SearchBarTransferData) => void;
   /** Callback when data changes */
   onChange?: (data: SearchBarTransferData) => void;
+  /** Callback when a transfer line is removed */
+  onRemove?: (index: number, transferLine: TransferLineData) => void;
   /** Additional CSS classes */
   className?: string;
+  /** Whether to scroll to the input when the calendar opens */
+  scrollOnOpen?: boolean;
 }
 
 let transferIdCounter = 0;
@@ -54,7 +58,9 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
   defaultSameVehicle = false,
   onSearch,
   onChange,
+  onRemove,
   className = "",
+  scrollOnOpen = false,
 }) => {
   // Generate unique ID for transfer lines
   const generateTransferId = () => {
@@ -101,27 +107,9 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     const transferMode = newMode as TransferMode;
     if (transferMode === mode) return;
 
-    if (transferMode === "custom" && mode === "roundtrip" && roundTripData) {
-      // Parse roundtrip to two transfer lines
-      const arrivalTransfer: TransferLineData = {
-        id: generateTransferId(),
-        type: "arrival",
-        paxData: roundTripData.paxData,
-        transferDate: roundTripData.arrivalDate,
-        pickupPoint: roundTripData.pickupDropoffPoint,
-        dropoffPoint: roundTripData.accommodation,
-      };
-
-      const departureTransfer: TransferLineData = {
-        id: generateTransferId(),
-        type: "departure",
-        paxData: roundTripData.paxData,
-        transferDate: roundTripData.departureDate,
-        pickupPoint: roundTripData.accommodation,
-        dropoffPoint: roundTripData.pickupDropoffPoint,
-      };
-
-      setTransferLines([arrivalTransfer, departureTransfer]);
+    if (transferMode === "custom" && mode === "roundtrip") {
+      // When switching to custom mode, reset transfer lines (will show placeholder)
+      setTransferLines([]);
       setRoundTripData(undefined);
     } else if (transferMode === "roundtrip" && mode === "custom") {
       // Reset everything when switching to roundtrip
@@ -172,46 +160,16 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     </div>
   );
 
-  // Handle adding transfer from round-trip mode (converts round-trip to custom and adds new transfer)
+  // Handle adding transfer from round-trip mode (switches to custom and adds new transfer)
   const handleAddTransferFromRoundTrip = (type: TransferType) => {
-    if (!roundTripData) {
-      // If no round trip data, just add a new transfer and switch to custom
-      const newTransfer: TransferLineData = {
-        id: generateTransferId(),
-        type,
-      };
-      setTransferLines([newTransfer]);
-      setMode("custom");
-      return;
-    }
-
-    // Convert roundtrip to two transfer lines
-    const arrivalTransfer: TransferLineData = {
-      id: generateTransferId(),
-      type: "arrival",
-      paxData: roundTripData.paxData,
-      transferDate: roundTripData.arrivalDate,
-      pickupPoint: roundTripData.pickupDropoffPoint,
-      dropoffPoint: roundTripData.accommodation,
-    };
-
-    const departureTransfer: TransferLineData = {
-      id: generateTransferId(),
-      type: "departure",
-      paxData: roundTripData.paxData,
-      transferDate: roundTripData.departureDate,
-      pickupPoint: roundTripData.accommodation,
-      dropoffPoint: roundTripData.pickupDropoffPoint,
-    };
-
     // Add the new transfer of the clicked type
     const newTransfer: TransferLineData = {
       id: generateTransferId(),
       type,
     };
 
-    // Set all transfers and switch to custom mode
-    setTransferLines([arrivalTransfer, departureTransfer, newTransfer]);
+    // Set the transfer and switch to custom mode
+    setTransferLines([newTransfer]);
     setRoundTripData(undefined);
     setMode("custom");
     setError(null);
@@ -226,6 +184,13 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
 
   // Handle transfer line deletion
   const handleDeleteTransferLine = (id: string) => {
+    const index = transferLines.findIndex((line) => line.id === id);
+    const transferLine = transferLines.find((line) => line.id === id);
+    
+    if (index !== -1 && transferLine) {
+      onRemove?.(index, transferLine);
+    }
+    
     setTransferLines((prevLines) => prevLines.filter((line) => line.id !== id));
   };
 
@@ -314,6 +279,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
             accommodation={roundTripData?.accommodation?.id as string}
             onChange={setRoundTripData}
             checkEmpty={error !== null}
+            scrollOnOpen={scrollOnOpen}
           />
           {/* Transfer type buttons for round-trip mode */}
           <div className="search-bar-transfer__transfer-type">
@@ -330,6 +296,19 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
             {renderTransferTypeButtons(handleAddTransfer)}
           </div>
 
+          {/* Show placeholder disabled transfer line when there are no transfers */}
+          {transferLines.length === 0 && (
+            <TransferLine
+              id="placeholder-transfer"
+              type="inter-hotel"
+              locations={locations}
+              onDataChange={() => {}}
+              showDelete={false}
+              disabled={true}
+              scrollOnOpen={scrollOnOpen}
+            />
+          )}
+
           {/* Transfer lines list */}
           {transferLines.length > 0 && (
             <div className="search-bar-transfer__transfer-lines">
@@ -381,6 +360,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
                         onDelete={() => handleDeleteTransferLine(line.id)}
                         showDelete={transferLines.length > 1}
                         checkEmpty={error !== null}
+                        scrollOnOpen={scrollOnOpen}
                       />
                     ))}
 

package/src/components/organisms/Table/Table.css

@@ -16,10 +16,14 @@
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
+  table-layout: fixed;
   th,
   td {
     padding-inline: var(--spacing-padding-px-4);
   }
+  .table__cell-highlighted {
+    padding: 0;
+  }
 }
 .table__header {
   th {
@@ -34,61 +38,13 @@
     &:hover:not(.table__no-hover) {
       background-color: var(--color-elevation-state-hover-subtle);
     }
-    &:first-child {
-      border-top: none;
-    }
-    &.table__row-yellow {
-      background-color: var(--color-yellow-50);
-      border: 1px solid transparent;
-      position: relative;
-      &::after {
-        content: '';
-        position: absolute;
-        inset: -1px;
-        pointer-events: none;
-        background-image:
-          repeating-linear-gradient(
-            to right,
-            var(--color-yellow-600) 0,
-            var(--color-yellow-600) 8px,
-            transparent 8px,
-            transparent 16px
-          ),
-          repeating-linear-gradient(
-            to right,
-            var(--color-yellow-600) 0,
-            var(--color-yellow-600) 8px,
-            transparent 8px,
-            transparent 16px
-          ),
-          repeating-linear-gradient(
-            to bottom,
-            var(--color-yellow-600) 0,
-            var(--color-yellow-600) 8px,
-            transparent 8px,
-            transparent 16px
-          ),
-          repeating-linear-gradient(
-            to bottom,
-            var(--color-yellow-600) 0,
-            var(--color-yellow-600) 8px,
-            transparent 8px,
-            transparent 16px
-          );
-        background-size:
-          100% 1px,
-          100% 1px,
-          1px 100%,
-          1px 100%;
-        background-position: top, bottom, left, right;
-        background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
-      }
-      &:hover {
+    &.table__row-highlighted:hover {
+      tr {
         background-color: var(--color-yellow-100);
       }
-      & + tr {
-        border-top: none;
-      }
+    }
+    &:first-child {
+      border-top: none;
     }
     &.table__row-border-0 {
       border-top: none;
@@ -258,3 +214,58 @@
     }
   }
 }
+
+.table__row-div-highlighted {
+  background-color: var(--color-yellow-50);
+  border: 1px solid transparent;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    pointer-events: none;
+    background-image:
+      repeating-linear-gradient(
+        to right,
+        var(--color-yellow-600) 0,
+        var(--color-yellow-600) 8px,
+        transparent 8px,
+        transparent 16px
+      ),
+      repeating-linear-gradient(
+        to right,
+        var(--color-yellow-600) 0,
+        var(--color-yellow-600) 8px,
+        transparent 8px,
+        transparent 16px
+      ),
+      repeating-linear-gradient(
+        to bottom,
+        var(--color-yellow-600) 0,
+        var(--color-yellow-600) 8px,
+        transparent 8px,
+        transparent 16px
+      ),
+      repeating-linear-gradient(
+        to bottom,
+        var(--color-yellow-600) 0,
+        var(--color-yellow-600) 8px,
+        transparent 8px,
+        transparent 16px
+      );
+    background-size:
+      100% 1px,
+      100% 1px,
+      1px 100%,
+      1px 100%;
+    background-position: top, bottom, left, right;
+    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  }
+  &:hover {
+    background-color: var(--color-yellow-100);
+  }
+  & + tr {
+    border-top: none;
+  }
+}

package/src/components/organisms/Table/Table.tsx

@@ -22,6 +22,8 @@ export type TableRowData<T = any> = {
    */
   className?: string;
 
+  isHighlighted?: boolean;
+
   /** Children rows for the row */
   children?: T[];
 };
@@ -194,9 +196,28 @@ export function Table<T extends TableRowData<T>>(props: TableProps<T>) {
                     className={cn(row.className, {
                       'table__row-nested': row.children?.length,
                       'table__row-clickable': onClickRow,
+                      'table__row-highlighted': row.isHighlighted,
                     })}
                     onClick={(e) => onClickRow?.(e, row)}>
-                    <TableCell<T> columns={columns} row={row} rowIndex={rowIndex} />
+                    {row.isHighlighted ? (
+                      <td colSpan={columns.length} className="table__cell-highlighted">
+                        <div className="table__row-div-highlighted">
+                          <table className="table">
+                            <tbody>
+                              <tr>
+                                <TableCell<T>
+                                  columns={columns}
+                                  row={row}
+                                  rowIndex={rowIndex}
+                                />
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                      </td>
+                    ) : (
+                      <TableCell<T> columns={columns} row={row} rowIndex={rowIndex} />
+                    )}
                   </tr>
                 );
 

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

@@ -1,4 +1,5 @@
 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';
@@ -8,8 +9,40 @@ import { BookingListItem } from '@/src/types/table/booking.types';
 import { ColumnType } from '../TableCell';
 import { actionDropdownData } from '../constant';
 
+const CHIP_WIDTH = 'w-[184px]';
+const BUTTON_WIDTH = 'w-[89px]';
+
+const renderStatusContent = (status: BookingListItem['status']) => {
+  if (status === 'PENDING') {
+    return (
+      <Chip size="sm" color="yellow" className={CHIP_WIDTH}>
+        On Request
+      </Chip>
+    );
+  }
+
+  if (status === 'Cancelled') {
+    return (
+      <Chip size="sm" color="red" className={CHIP_WIDTH}>
+        Cancelled
+      </Chip>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-x-3">
+      <Button variant="secondary" size="sm" className={BUTTON_WIDTH}>
+        Proforma
+      </Button>
+      <Button variant="outline-secondary" size="sm" className={BUTTON_WIDTH}>
+        Voucher
+      </Button>
+    </div>
+  );
+};
+
 export const bookingColumns: (params: {
-  onAction?: (action: ActionDropdownType) => void;
+  onAction?: (data: BookingListItem) => (action: ActionDropdownType) => void;
   keywords?: string;
 }) => ColumnType<BookingListItem>[] = ({ onAction, keywords = '' }) => [
   {
@@ -101,19 +134,13 @@ export const bookingColumns: (params: {
     key: 'actions',
     width: 232,
     cell: (_value, raw) => {
+      const handleAction = onAction?.(raw) ?? (() => {});
+      const actionData = actionDropdownData(handleAction);
+
       return (
-        <div>
-          <div className="flex items-center gap-x-8">
-            <div className="flex items-center gap-x-3">
-              <Button variant="secondary" size="sm" className="w-[89px]">
-                Proforma
-              </Button>
-              <Button variant="outline-secondary" size="sm" className="w-[89px]">
-                Voucher
-              </Button>
-            </div>
-            <ActionDropdown data={actionDropdownData(onAction ?? (() => {}))} />
-          </div>
+        <div className="flex items-center justify-between">
+          {renderStatusContent(raw.status)}
+          <ActionDropdown data={actionData} />
         </div>
       );
     },