mautourco-components 0.2.76 → 0.2.78

package/src/components/organisms/CarBookingCard/CarBookingCard.tsx

@@ -1,9 +1,12 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { TransferDocket } from '../../../types/docket/services.types';
 import Button, { ButtonProps } from '../../atoms/Button/Button';
+import Chip from '../../atoms/Chip/Chip';
 import Divider from '../../atoms/Divider/Divider';
-import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
+import Icon from '../../atoms/Icon/Icon';
 import { Heading, Text } from '../../atoms/Typography/Typography';
 import FeatureRow, { FeatureRowProps } from '../../molecules/FeatureRow/FeatureRow';
+import VehicleSupplement, { Supplement, SupplementValue } from '../../molecules/VehicleSupplement/VehicleSupplement';
 import './CarBookingCard.css';
 
 export type CarBookingCardSize = 'small' | 'large';
@@ -40,14 +43,18 @@ export interface CarBookingCardProps {
   /** Supplement dropdown section */
   /** Whether to render the supplement section (matches Figma variants Supplement=Yes/No/-) */
   showSupplement?: boolean;
-  /** Optional message shown in red next to the "Supplement" label (Figma: "Supplement is not available for this vehicle.") */
+  /** Optional message shown next to the "Supplement" label (Figma: "Supplement is not available for this vehicle.") */
   supplementMessage?: string;
+  /** State variant for the supplement message: 'error' applies danger/red styling, 'default' uses normal text color */
+  supplementMessageState?: 'default' | 'error';
   supplementLabel?: string;
   supplementPlaceholder?: string;
-  supplementValue?: string;
-  supplementState?: 'default' | 'loading' | 'selected' | 'error' | 'disabled';
-  supplementOptions?: string[];
-  onSupplementSelect?: (option: string) => void;
+  /** Array of available supplements */
+  supplements?: Supplement[];
+  /** Array of transfers for supplement selection */
+  transfers?: TransferDocket[];
+  /** Handler when supplements are selected */
+  onSupplementChange?: (values: SupplementValue[]) => void;
 
   /** Footer price */
   totalPrice: string;
@@ -56,7 +63,7 @@ export interface CarBookingCardProps {
   /** Footer CTA */
   ctaLabel: string;
   ctaButtonProps?: Omit<ButtonProps, 'children'>;
-  onCtaClick?: ButtonProps['onClick'];
+  onCtaClick?: (event: React.MouseEvent<HTMLButtonElement>, supplements?: SupplementValue[]) => void;
 
   /** Readonly mode - disables interactions and shows values as text */
   readonly?: boolean;
@@ -76,12 +83,12 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
   priceRows = [],
   showSupplement,
   supplementMessage,
+  supplementMessageState = 'error',
   supplementLabel = 'Supplement',
   supplementPlaceholder = 'Select a supplement',
-  supplementValue,
-  supplementState = 'default',
-  supplementOptions = [],
-  onSupplementSelect,
+  supplements = [],
+  transfers = [],
+  onSupplementChange,
   totalPrice,
   totalPriceLabel = 'Total price',
   ctaLabel,
@@ -92,16 +99,94 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
 }) => {
   const [isSelected, setIsSelected] = useState(state === 'selected');
   const [isHovered, setIsHovered] = useState(false);
+  const [isSupplementOpen, setIsSupplementOpen] = useState(false);
+  const [selectedSupplements, setSelectedSupplements] = useState<SupplementValue[]>([]);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
   
   const resolvedShowSupplement =
-    showSupplement ?? Boolean(supplementLabel || supplementPlaceholder || supplementOptions.length > 0);
-  const resolvedSupplementState =
-    supplementMessage ? 'disabled' : supplementState;
+    showSupplement ?? Boolean(supplements.length > 0 && transfers.length > 0);
+  
+  const hasSupplementsSelected = selectedSupplements.some((s) => s.value > 0);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsSupplementOpen(false);
+      }
+    };
+
+    if (isSupplementOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isSupplementOpen]);
+
+  // Auto-scroll to panel when opened
+  useEffect(() => {
+    if (isSupplementOpen && panelRef.current) {
+      // Small delay to ensure the panel is rendered
+      setTimeout(() => {
+        panelRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+        });
+      }, 100);
+    }
+  }, [isSupplementOpen]);
+
+  const getSupplementSummary = (): string[] => {
+    const summary: string[] = [];
+    const grouped = selectedSupplements.reduce((acc, item) => {
+      if (item.value > 0) {
+        if (!acc[item.supplementName]) {
+          acc[item.supplementName] = 0;
+        }
+        acc[item.supplementName] += item.value;
+      }
+      return acc;
+    }, {} as Record<string, number>);
+
+    Object.entries(grouped).forEach(([name, count]) => {
+      summary.push(`${name} x${count}`);
+    });
+
+    return summary;
+  };
 
-  // Handle CTA click: toggle between "Add to quote" and "Selected"
+  const handleSupplementDone = (values: SupplementValue[]) => {
+    setSelectedSupplements(values);
+    setIsSupplementOpen(false);
+    onSupplementChange?.(values);
+  };
+
+  const handleSupplementClear = () => {
+    setIsSupplementOpen(false);
+  };
+
+  const handleSupplementToggle = () => {
+    if (!supplementMessage) {
+      setIsSupplementOpen(!isSupplementOpen);
+    }
+  };
+
+  const handleRemoveSupplement = (supplementName: string) => {
+    const updatedValues = selectedSupplements.map((s) =>
+      s.supplementName === supplementName ? { ...s, value: 0 } : s
+    );
+    setSelectedSupplements(updatedValues);
+    onSupplementChange?.(updatedValues);
+  };
+
+  // Handle CTA click: toggle between "Add to quote" and "Selected" and pass supplement data
   const handleCtaClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     setIsSelected(!isSelected);
-    onCtaClick?.(e);
+    // Pass the selected supplements to the parent component
+    onCtaClick?.(e, selectedSupplements.length > 0 ? selectedSupplements : undefined);
   };
 
   // Determine button state based on selection and hover
@@ -206,31 +291,64 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
                   size="sm"
                   leading="5"
                   variant="regular"
-                  className="car-booking-card__supplement-message"
+                  className={`car-booking-card__supplement-message ${supplementMessageState === 'error' ? 'car-booking-card__supplement-message--error' : ''}`.trim()}
                 >
                   {supplementMessage}
                 </Text>
               )}
             </div>
-            {readonly ? (
-              <Text
-                size="sm"
-                leading="5"
-                variant="regular"
-                color={supplementValue ? "default" : "subtle"}
-                className="car-booking-card__supplement-value"
+            
+            <div className="car-booking-card__supplement-dropdown" ref={dropdownRef}>
+              <button
+                type="button"
+                className={`car-booking-card__supplement-trigger ${hasSupplementsSelected ? 'car-booking-card__supplement-trigger--has-value' : ''} ${supplementMessage ? 'car-booking-card__supplement-trigger--disabled' : ''}`}
+                onClick={handleSupplementToggle}
+                disabled={Boolean(supplementMessage)}
               >
-                {supplementValue || supplementPlaceholder}
-              </Text>
-            ) : (
-              <DropdownInput
-                placeholder={supplementPlaceholder}
-                value={supplementValue}
-                state={resolvedSupplementState}
-                options={supplementOptions}
-                onSelect={onSupplementSelect}
-              />
-            )}
+                {hasSupplementsSelected ? (
+                  <div className="car-booking-card__supplement-chips">
+                    {getSupplementSummary().map((summary, idx) => {
+                      const [name] = summary.split(' x');
+                      return (
+                        <Chip
+                          key={idx}
+                          label={summary}
+                          size="sm"
+                          color="accent"
+                          trailingIcon="close"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleRemoveSupplement(name);
+                          }}
+                        />
+                      );
+                    })}
+                  </div>
+                ) : (
+                  <span className="car-booking-card__supplement-placeholder">
+                    {supplementPlaceholder}
+                  </span>
+                )}
+                <Icon
+                  name="chevron-down"
+                  size="sm"
+                  className={`car-booking-card__supplement-icon ${isSupplementOpen ? 'car-booking-card__supplement-icon--open' : ''}`}
+                />
+              </button>
+
+              {isSupplementOpen && (
+                <div className="car-booking-card__supplement-panel" ref={panelRef}>
+                  <VehicleSupplement
+                    supplements={supplements}
+                    transfer={transfers}
+                    initialValues={selectedSupplements}
+                    onChange={() => {}}
+                    onDone={handleSupplementDone}
+                    onClear={handleSupplementClear}
+                  />
+                </div>
+              )}
+            </div>
           </section>
         )}