mautourco-components 0.2.76 → 0.2.78

package/src/components/atoms/Chip/Chip.css

@@ -156,11 +156,42 @@
   opacity: 0.6;
 }
 
-.chip--clickable:focus {
+/* Focus styles - specific to each color */
+.chip--clickable.chip--brand:focus {
   outline: 2px solid var(--chip-color-brand-outline-foreground, #ed4c09);
   outline-offset: 2px;
 }
 
+.chip--clickable.chip--accent:focus {
+  outline: 2px solid var(--chip-color-accent-outline-foreground, #0f7173);
+  outline-offset: 2px;
+}
+
+.chip--clickable.chip--blue:focus {
+  outline: 2px solid var(--chip-color-blue-outline-foreground, #2e4780);
+  outline-offset: 2px;
+}
+
+.chip--clickable.chip--green:focus {
+  outline: 2px solid var(--chip-color-green-outline-foreground, #4a6045);
+  outline-offset: 2px;
+}
+
+.chip--clickable.chip--yellow:focus {
+  outline: 2px solid var(--chip-color-yellow-outline-foreground, #eab308);
+  outline-offset: 2px;
+}
+
+.chip--clickable.chip--red:focus {
+  outline: 2px solid var(--chip-color-red-outline-foreground, #991b1b);
+  outline-offset: 2px;
+}
+
+.chip--clickable.chip--neutral:focus {
+  outline: 2px solid var(--chip-color-neutral-outline-foreground, #9ca3af);
+  outline-offset: 2px;
+}
+
 .chip--outline.chip--black-text {
   color: var(--chip-color-neutral-outline-text, #262626);
 }

package/src/components/molecules/VehicleSupplement/VehicleSupplement.css

@@ -0,0 +1,81 @@
+.vehicle-supplement {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-6, 24px);
+  padding: var(--spacing-padding-px-0, 0px);
+}
+
+.vehicle-supplement__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-4, 16px);
+}
+
+.vehicle-supplement__transfer-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-4, 16px);
+}
+
+.vehicle-supplement__transfer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  padding: var(--spacing-gap-gap-0, 0px);
+}
+
+.vehicle-supplement__transfer-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2, 8px);
+}
+
+.vehicle-supplement__transfer-label {
+  font-family: var(--font-font-family-body, "Satoshi"), "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-weight: var(--font-weight-font-bold, 700);
+  font-size: var(--font-size-text-base, 16px);
+  line-height: calc(var(--font-leading-leading-md, 24) * 1px);
+  color: var(--checkbox-color-label-default, #303642);
+}
+
+.vehicle-supplement__supplements-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-3, 12px);
+}
+
+.vehicle-supplement__supplement-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+  padding: var(--spacing-padding-px-0, 0px);
+}
+
+.vehicle-supplement__supplement-name {
+  font-family: var(--font-font-family-body, "Satoshi"), "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-weight: var(--font-weight-font-medium, 500);
+  font-size: var(--font-size-text-base, 16px);
+  line-height: calc(var(--font-leading-leading-md, 24) * 1px);
+  color: var(--checkbox-color-label-default, #303642);
+}
+
+.vehicle-supplement__divider {
+  width: 100%;
+  height: 0;
+  border-top: 1px solid var(--color-border-default, #d9d9d9);
+}
+
+.vehicle-supplement__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-gap-gap-4, 16px);
+  height: 36px;
+}
+
+.vehicle-supplement__cancel-button,
+.vehicle-supplement__done-button {
+  min-width: 114px;
+}

package/src/components/molecules/VehicleSupplement/VehicleSupplement.tsx

@@ -0,0 +1,206 @@
+import React, { useState } from 'react';
+import { TransferDocket } from '../../../types/docket/services.types';
+import Button from '../../atoms/Button/Button';
+import Chip from '../../atoms/Chip/Chip';
+import Icon from '../../atoms/Icon/Icon';
+import Stepper from '../Stepper/Stepper';
+import './VehicleSupplement.css';
+
+export interface Supplement {
+  supplement_name: string;
+  max?: number;
+  min?: number;
+}
+
+export interface SupplementValue {
+  transferId: number;
+  supplementName: string;
+  value: number;
+}
+
+export interface VehicleSupplementProps {
+  /** Array of available supplements */
+  supplements: Supplement[];
+  /** Array of transfers (Arrival, Inter-Hotel, Departure) */
+  transfer: TransferDocket[];
+  /** Handler called when supplement values change */
+  onChange: (values: SupplementValue[]) => void;
+  /** Handler called when Done button is clicked */
+  onDone: (values: SupplementValue[]) => void;
+  /** Handler called when Clear/Cancel button is clicked */
+  onClear: () => void;
+  /** Initial values for the supplements (optional) */
+  initialValues?: SupplementValue[];
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const VehicleSupplement: React.FC<VehicleSupplementProps> = ({
+  supplements,
+  transfer,
+  onChange,
+  onDone,
+  onClear,
+  initialValues = [],
+  className = '',
+}) => {
+  // Initialize state for all supplements across all transfers
+  const [supplementValues, setSupplementValues] = useState<SupplementValue[]>(() => {
+    // If initial values are provided, use them
+    if (initialValues.length > 0) {
+      return initialValues;
+    }
+    
+    // Otherwise, create default values with 0
+    const defaultValues: SupplementValue[] = [];
+    transfer.forEach((t) => {
+      supplements.forEach((s) => {
+        defaultValues.push({
+          transferId: t.IdTransfer,
+          supplementName: s.supplement_name,
+          value: 0,
+        });
+      });
+    });
+    return defaultValues;
+  });
+
+  const getValue = (transferId: number, supplementName: string): number => {
+    const item = supplementValues.find(
+      (v) => v.transferId === transferId && v.supplementName === supplementName
+    );
+    return item?.value || 0;
+  };
+
+  const handleSupplementChange = (
+    transferId: number,
+    supplementName: string,
+    newValue: number
+  ) => {
+    const updatedValues = supplementValues.map((v) =>
+      v.transferId === transferId && v.supplementName === supplementName
+        ? { ...v, value: newValue }
+        : v
+    );
+    setSupplementValues(updatedValues);
+    onChange(updatedValues);
+  };
+
+  const getTransferTypeIcon = (transferType: string) => {
+    const type = transferType.toLowerCase();
+    if (type.includes('arrival') || type.includes('airport') || type.includes('inbound')) {
+      return 'plane-landing-outline';
+    }
+    if (type.includes('departure') || type.includes('outbound')) {
+      return 'plane-takeoff-outline';
+    }
+    return 'building-2-outline';
+  };
+
+  const getTransferTypeLabel = (transferType: string): string => {
+    const type = transferType.toLowerCase();
+    if (type.includes('arrival') || type.includes('airport') || type.includes('inbound')) {
+      return 'Arrival';
+    }
+    if (type.includes('departure') || type.includes('outbound')) {
+      return 'Departure';
+    }
+    return 'Inter-Hotel';
+  };
+
+  const formatDate = (dateStr: string): string => {
+    try {
+      const date = new Date(dateStr);
+      const day = String(date.getDate()).padStart(2, '0');
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const year = date.getFullYear();
+      return `${day}/${month}/${year}`;
+    } catch {
+      return dateStr;
+    }
+  };
+
+  const handleDone = () => {
+    onDone(supplementValues);
+  };
+
+  const baseClass = 'vehicle-supplement';
+  const classes = [baseClass, className].filter(Boolean).join(' ');
+
+  return (
+    <div className={classes}>
+      <div className={`${baseClass}__content`}>
+        {transfer.map((t, index) => {
+          const isLast = index === transfer.length - 1;
+          const typeLabel = getTransferTypeLabel(t.TransferType);
+          const iconName = getTransferTypeIcon(t.TransferType);
+
+          return (
+            <div key={t.IdTransfer} className={`${baseClass}__transfer-section`}>
+              <div className={`${baseClass}__transfer-header`}>
+                <div className={`${baseClass}__transfer-title`}>
+                  <Icon name={iconName as any} size="sm" />
+                  <span className={`${baseClass}__transfer-label`}>{typeLabel}</span>
+                </div>
+                <Chip
+                  leadingIcon="calendar"
+                  label={formatDate(t.TransferDate)}
+                  size="sm"
+                  color="neutral"
+                  isBlackText
+                />
+              </div>
+
+              <div className={`${baseClass}__supplements-list`}>
+                {supplements.map((supplement) => {
+                  const currentValue = getValue(t.IdTransfer, supplement.supplement_name);
+                  return (
+                    <div
+                      key={supplement.supplement_name}
+                      className={`${baseClass}__supplement-row`}
+                    >
+                      <span className={`${baseClass}__supplement-name`}>
+                        {supplement.supplement_name}
+                      </span>
+                      <Stepper
+                        value={currentValue}
+                        min={supplement.min || 0}
+                        max={supplement.max || 99}
+                        onChange={(value) =>
+                          handleSupplementChange(t.IdTransfer, supplement.supplement_name, value)
+                        }
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+
+              {!isLast && <div className={`${baseClass}__divider`} />}
+            </div>
+          );
+        })}
+      </div>
+
+      <div className={`${baseClass}__footer`}>
+        <Button
+          variant="outline-secondary"
+          size="sm"
+          onClick={onClear}
+          className={`${baseClass}__cancel-button`}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={handleDone}
+          className={`${baseClass}__done-button`}
+        >
+          Done
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default VehicleSupplement;

package/src/components/molecules/VehicleSupplement/index.ts

@@ -0,0 +1,2 @@
+export { default } from './VehicleSupplement';
+export type { VehicleSupplementProps, Supplement, SupplementValue } from './VehicleSupplement';

package/src/components/organisms/CarBookingCard/CarBookingCard.css

@@ -133,12 +133,15 @@
 
 .car-booking-card__supplement-message {
   margin: 0;
-  color: var(--color-messaging-danger-foreground, #a01414);
   white-space: normal;
   text-align: right;
   flex: 1 1 auto;
 }
 
+.car-booking-card__supplement-header .car-booking-card__supplement-message--error {
+  color: var(--color-messaging-danger-foreground, #a01414);
+}
+
 .car-booking-card__section--supplement {
   /* Control spacing precisely: divider -> header != header -> select */
   gap: 0;
@@ -245,4 +248,121 @@
   white-space: nowrap;
 }
 
+/* Supplement dropdown styles */
+.car-booking-card__supplement-dropdown {
+  position: relative;
+  width: 100%;
+}
+
+.car-booking-card__supplement-trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-gap-gap-2, 8px);
+  padding: var(--spacing-padding-py-3, 12px) var(--spacing-padding-px-4, 16px);
+  background: var(--color-elevation-level-1, #ffffff);
+  border: var(--input-border-width-default, 1px) solid var(--color-border-default, #d4d4d4);
+  border-radius: var(--border-radius-rounded-xl, 12px);
+  font-family: var(--font-font-family-body, "Satoshi"), "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: var(--font-size-text-base, 16px);
+  line-height: calc(var(--font-leading-leading-md, 24) * 1px);
+  color: var(--color-text-default, #262626);
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+  min-height: 48px;
+}
+
+.car-booking-card__supplement-trigger:hover:not(:disabled) {
+  border-color: var(--color-border-active-default, #0f7173);
+}
+
+.car-booking-card__supplement-trigger:focus {
+  outline: var(--border-width-focus, 2px) solid var(--color-border-active-default, #0f7173);
+  outline-offset: var(--spacing-base-0-5, 2px);
+}
+
+.car-booking-card__supplement-trigger--disabled {
+  background: var(--color-elevation-level-2, #f5f5f5);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.car-booking-card__supplement-placeholder {
+  color: var(--color-text-subtle, #737373);
+  font-weight: var(--font-weight-font-regular, 400);
+}
+
+.car-booking-card__supplement-trigger--has-value .car-booking-card__supplement-placeholder {
+  color: var(--color-text-default, #262626);
+}
+
+.car-booking-card__supplement-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-gap-gap-2, 8px);
+  flex: 1;
+  align-items: center;
+}
+
+/* Ensure chips are properly interactive within the button */
+.car-booking-card__supplement-chips .chip {
+  cursor: pointer;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  user-select: none;
+}
+
+/* Hover state for chips - subtle scale and opacity change */
+.car-booking-card__supplement-chips .chip:hover {
+  opacity: 0.85;
+  transform: translateY(-1px);
+}
+
+/* Active/pressed state for chips */
+.car-booking-card__supplement-chips .chip:active {
+  opacity: 0.7;
+  transform: translateY(0);
+}
+
+/* Make close icon more prominent on chip hover */
+.car-booking-card__supplement-chips .chip:hover .chip__icon--trailing {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+/* Transition for chip icons */
+.car-booking-card__supplement-chips .chip .chip__icon--trailing {
+  transition: transform 0.15s ease, opacity 0.15s ease;
+  opacity: 0.8;
+}
+
+.car-booking-card__supplement-icon {
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.car-booking-card__supplement-icon--open {
+  transform: rotate(180deg);
+}
+
+.car-booking-card__supplement-panel {
+  position: absolute;
+  top: calc(100% + var(--spacing-gap-gap-2, 8px));
+  left: 0;
+  right: 0;
+  z-index: 10;
+  background: var(--color-elevation-level-1, #ffffff);
+  border-radius: var(--border-radius-rounded-xl, 12px);
+  box-shadow:
+    var(--spacing-base-0, 0px) var(--spacing-base-1, 4px)
+      var(--backdrop-blur-backdrop-blur, 8px) var(--spacing-base-0, 0px)
+      rgba(48, 54, 66, 0.1),
+    var(--spacing-base-0, 0px) var(--spacing-base-px, 1px)
+      var(--backdrop-blur-backdrop-blur, 8px) var(--spacing-base-0, 0px)
+      rgba(48, 54, 66, 0.11);
+  padding: var(--spacing-padding-py-6, 24px);
+  max-height: 600px;
+  overflow-y: auto;
+}
+