mautourco-components 0.2.23 → 0.2.24

package/src/components/molecules/TransferDocket/TransferDocket.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { TransferDocket as TransferDocketType } from '../../../types/docket/services.types';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import { DateDisplay } from '../DateDisplay/DateDisplay';
+import { PriceDisplay } from '../PriceDisplay/PriceDisplay';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+import '../../../styles/components/molecule/transfer-docket.css';
+
+export interface TransferDocketProps {
+  data: TransferDocketType;
+}
+
+export const TransferDocket: React.FC<TransferDocketProps> = ({ data }) => {
+  const {
+    TransferDate,
+    Currency,
+    TotalPrice,
+    LocationFromName,
+    LocationToName,
+    AdultCount,
+    ChildCount,
+    TeenCount,
+    InfantCount,
+    VehicleTypeName,
+    paxAge,
+  } = data;
+
+  const formatChildrenInfo = (): React.ReactNode => {
+    const totalChildren = (ChildCount || 0) + (TeenCount || 0);
+    if (totalChildren === 0) {
+      return null;
+    }
+
+    const childrenInfo: React.ReactNode[] = [];
+    const ages = paxAge || [];
+
+    // Group children by age
+    const childGroups: Array<{ count: number; age: number }> = [];
+
+    if (ages.length > 0) {
+      // Count children by age
+      const ageCounts: Record<number, number> = {};
+      ages.forEach((age: any) => {
+        const ageNum = typeof age === 'number' ? age : parseInt(age, 10);
+        if (!isNaN(ageNum)) {
+          ageCounts[ageNum] = (ageCounts[ageNum] || 0) + 1;
+        }
+      });
+
+      Object.entries(ageCounts).forEach(([age, count]) => {
+        childGroups.push({ count, age: parseInt(age, 10) });
+      });
+    } else {
+      // If no age info, just show total count
+      if (totalChildren > 0) {
+        childGroups.push({ count: totalChildren, age: 0 });
+      }
+    }
+
+    if (childGroups.length === 0) {
+      return null;
+    }
+
+    return (
+      <div className="transfer-docket__children">
+        {childGroups.map((group, index) => (
+          <React.Fragment key={`child-${index}`}>
+            {index > 0 && <div className="transfer-docket__divider-vertical" />}
+            <span className="transfer-docket__child-info">
+              <Text size="sm" variant="medium" color="default">
+                {group.count} Child{group.count > 1 ? 'ren' : ''}
+              </Text>
+              {group.age > 0 ? (
+                <Text
+                  size="sm"
+                  variant="medium"
+                  className="transfer-docket__child-age">
+                  {' '}
+                  ({group.age} y.o)
+                </Text>
+              ) : null}
+            </span>
+          </React.Fragment>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <div className="transfer-docket">
+      <div className="transfer-docket__header">
+        <div className="transfer-docket__title-section">
+          <div className="transfer-docket__title-bar" />
+          <Icon name="bus" size="sm" />
+          <Text variant="bold" size="sm" color="accent">
+            Transfer
+          </Text>
+        </div>
+        {TotalPrice && Currency && (
+          <PriceDisplay currency={Currency} price={TotalPrice} />
+        )}
+      </div>
+
+      <div className="transfer-docket__details">
+        {TransferDate && (
+          <DateDisplay
+            date={TransferDate}
+            calendarSize="sm"
+            textSize="sm"
+            colorMode="green"
+          />
+        )}
+
+        {(LocationFromName || LocationToName) && (
+          <div className="transfer-docket__transfer-point">
+            <Text variant="medium" size="sm" color="subtle" leading="none">
+              {LocationFromName || 'From'}
+            </Text>
+            <Icon name="arrow-down-outline" size="sm" />
+            <Text variant="medium" size="sm" color="subtle" leading="none">
+              {LocationToName || 'To'}
+            </Text>
+          </div>
+        )}
+
+        <div className="transfer-docket__guests">
+          {AdultCount !== undefined && AdultCount > 0 && (
+            <TextWithIcon icon="user" textSize="sm" color="subtle">
+              {AdultCount} Adult{AdultCount > 1 ? 's' : ''}
+            </TextWithIcon>
+          )}
+          {((ChildCount && ChildCount > 0) || (TeenCount && TeenCount > 0)) ? (
+            <div className="transfer-docket__children-wrapper">
+              <Icon
+                name="user"
+                size="sm"
+                color="var(--color-text-subtle, #303642)"
+              />
+              {formatChildrenInfo()}
+            </div>
+          ) : null}
+        </div>
+
+        {VehicleTypeName && (
+          <TextWithIcon icon="car" textSize="sm" color="subtle" textLeading="none">
+            {VehicleTypeName}
+          </TextWithIcon>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TransferDocket;
+

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

@@ -0,0 +1,4 @@
+export { TransferDocket } from './TransferDocket';
+export type { TransferDocketProps } from './TransferDocket';
+export { default } from './TransferDocket';
+

package/src/components/organisms/CarBookingCard/index.ts

@@ -14,3 +14,4 @@ export type {
 
 
 
+

package/src/components/organisms/Docket/Docket.tsx

@@ -0,0 +1,456 @@
+import React, { useEffect, useState } from 'react';
+import '../../../styles/components/organism/docket.css';
+import { Docket as DocketType } from '../../../types/docket/docket.types';
+import {
+  AccomodationDocket as AccomodationDocketType,
+  ExcursionDocket as ExcursionDocketType,
+  OtherServiceDocket as OtherServiceDocketType,
+  ServiceDocket,
+  TransferDocket as TransferDocketType,
+} from '../../../types/docket/services.types';
+import Button from '../../atoms/Button/Button';
+import Chip from '../../atoms/Chip/Chip';
+import Icon from '../../atoms/Icon/Icon';
+import { AccomodationDocket } from '../../molecules/AccomodationDocket/AccomodationDocket';
+import { DocketPrices } from '../../molecules/DocketPrices/DocketPrices';
+import { ExcursionDocket } from '../../molecules/ExcursionDocket/ExcursionDocket';
+import { OtherServiceDocket } from '../../molecules/OtherServiceDocket/OtherServiceDocket';
+import { TransferDocket } from '../../molecules/TransferDocket/TransferDocket';
+
+export interface DocketHeaderProps {
+  /**
+   * Title text for the docket header
+   */
+  title?: string;
+
+  /**
+   * Handler for the "More options" button click
+   */
+  onMoreOptionsClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+export interface DocketFooterProps {
+  /**
+   * Mode of the docket: 'single' shows only Save and Book now, 'multiple' shows all buttons
+   */
+  mode?: 'single' | 'multiple';
+
+  /**
+   * Handler for "Add new quote" button click
+   */
+  onAddNewQuoteClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Handler for "View" button click
+   */
+  onViewClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Handler for "Save" button click
+   */
+  onSaveClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Handler for "Book now" button click
+   */
+  onBookNowClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+export interface DocketProps {
+  /**
+   * Array of nested Docket objects
+   */
+  dockets?: DocketType[];
+
+  /**
+   * Title text for the docket header
+   */
+  title?: string;
+
+  /**
+   * Handler for the "More options" button click
+   */
+  onMoreOptionsClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+
+  /**
+   * Handler for "Add new quote" button click
+   */
+  onAddNewQuoteClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Handler for "View" button click
+   */
+  onViewClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Handler for "Save" button click
+   */
+  onSaveClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Handler for "Book now" button click
+   */
+  onBookNowClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Mode of the docket: 'single' shows only Save and Book now in footer, 'multiple' shows all buttons
+   */
+  mode?: 'single' | 'multiple';
+
+  /**
+   * Show the header section
+   */
+  showHeader?: boolean;
+
+  /**
+   * Show the footer section
+   */
+  showFooter?: boolean;
+
+  /**
+   * Additional CSS classes to apply to the docket container
+   */
+  className?: string;
+
+  /**
+   * Optional click handler
+   */
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+
+  /**
+   * Optional data attributes for testing or tracking
+   */
+  'data-testid'?: string;
+}
+
+/**
+ * Collapsed header component for mobile/tablet view
+ */
+export const DocketCollapsedHeader: React.FC<{
+  title?: string;
+  onClick?: () => void;
+  className?: string;
+}> = ({ title = 'Your quotation', onClick, className = '' }) => {
+  return (
+    <div
+      className={`docket__collapsed-header ${className}`}
+      onClick={onClick}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick?.();
+        }
+      }}>
+      <div className="docket__collapsed-header-title">
+        <Icon name="quotation" size="lg" />
+        <h2 className="docket__collapsed-header-title-text">{title}</h2>
+      </div>
+      <Icon name="eye" size="lg" />
+    </div>
+  );
+};
+
+/**
+ * Empty state component for docket when no content is provided
+ */
+export const DocketEmptyState: React.FC<{ className?: string }> = ({
+  className = '',
+}) => {
+  return (
+    <div className={`docket__empty-state ${className}`}>
+      <div className="docket__empty-state-content">
+        <div className="docket__empty-state-illustration">
+          <img
+            src="/images/docket-empty-illustration.svg"
+            alt="Empty docket illustration"
+            className="docket__empty-state-image"
+          />
+        </div>
+        <p className="docket__empty-state-text">
+          <span className="docket__empty-state-text-bold">
+            Start by adding a service here—
+          </span>
+          <span className="docket__empty-state-text-regular">
+            you'll be able to create and compare multiple quotations.
+          </span>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * DocketHeader component for the docket title and more options button
+ */
+export const DocketHeader: React.FC<DocketHeaderProps> = ({
+  title = 'Your quotation',
+  onMoreOptionsClick,
+  className = '',
+}) => {
+  return (
+    <div className={`docket__header ${className}`}>
+      <div className="docket__header-title">
+        <Icon name="quotation" size="lg" />
+        <h2 className="docket__header-title-text">{title}</h2>
+      </div>
+      {onMoreOptionsClick && (
+        <Chip
+          onClick={onMoreOptionsClick}
+          trailingIcon="chevron-down"
+          className="docket__header-more-options">
+          More options
+        </Chip>
+      )}
+    </div>
+  );
+};
+
+/**
+ * DocketFooter component for action buttons
+ */
+export const DocketFooter: React.FC<DocketFooterProps> = ({
+  mode = 'multiple',
+  onAddNewQuoteClick,
+  onViewClick,
+  onSaveClick,
+  onBookNowClick,
+  className = '',
+}) => {
+  const isSingleMode = mode === 'single';
+
+  return (
+    <div className={`docket__footer ${className}`}>
+      {!isSingleMode && onAddNewQuoteClick && (
+        <Button
+          variant="outline-secondary"
+          size="sm"
+          leadingIcon="plus"
+          onClick={onAddNewQuoteClick}
+          className="docket__footer-button docket__footer-button--full">
+          Add new quote
+        </Button>
+      )}
+      <div className="docket__footer-actions">
+        {!isSingleMode && onViewClick && (
+          <Button
+            variant="outline-secondary"
+            size="sm"
+            onClick={onViewClick}
+            className="docket__footer-button">
+            View
+          </Button>
+        )}
+        {onSaveClick && (
+          <Button
+            variant="outline-secondary"
+            size="sm"
+            onClick={onSaveClick}
+            className="docket__footer-button">
+            Save
+          </Button>
+        )}
+        {onBookNowClick && (
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={onBookNowClick}
+            className="docket__footer-button docket__footer-button--primary">
+            Book now
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Docket is a container component for displaying quotation/docket information.
+ * It provides a structured layout for travel booking summaries with sections
+ * for accommodation, services, pricing, and actions.
+ */
+export const Docket: React.FC<DocketProps> = ({
+  dockets,
+  title = 'Your quotation',
+  onMoreOptionsClick,
+  onAddNewQuoteClick,
+  onViewClick,
+  onSaveClick,
+  onBookNowClick,
+  mode = 'multiple',
+  showHeader = true,
+  showFooter = true,
+  className = '',
+  onClick,
+  'data-testid': testId,
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 1024); // Tablet and mobile breakpoint
+    };
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleClose = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsOpen(false);
+  };
+
+  const baseClass = 'docket';
+  const classes = [
+    baseClass,
+    isMobile && !isOpen ? 'docket--collapsed' : '',
+    isMobile && isOpen ? 'docket--open' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const renderService = (service: ServiceDocket, index: number) => {
+    switch (service.type) {
+      case 'accommodation':
+        return (
+          <AccomodationDocket
+            key={`service-${index}`}
+            data={service as AccomodationDocketType}
+          />
+        );
+      case 'transfer':
+        return (
+          <TransferDocket key={`service-${index}`} data={service as TransferDocketType} />
+        );
+      case 'excursion':
+        return (
+          <ExcursionDocket
+            key={`service-${index}`}
+            data={service as ExcursionDocketType}
+          />
+        );
+      case 'otherService':
+        return (
+          <OtherServiceDocket
+            key={`service-${index}`}
+            data={service as OtherServiceDocketType}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  const renderContent = () => {
+    if (!dockets || dockets.length === 0) {
+      return <DocketEmptyState />;
+    }
+
+    // Collect all services from all dockets
+    const allServices = dockets.flatMap((docket) => docket.services || []);
+
+    if (allServices.length === 0) {
+      return <DocketEmptyState />;
+    }
+
+    const renderedServices = allServices
+      .map((service, index) => renderService(service, index))
+      .filter(Boolean);
+
+    if (renderedServices.length === 0) {
+      return <DocketEmptyState />;
+    }
+
+    return <div className="docket__services">{renderedServices}</div>;
+  };
+
+  // Collect all prices from all dockets
+  const allPrices = dockets ? dockets.flatMap((docket) => docket.prices || []) : [];
+
+  return (
+    <>
+      {isMobile && !isOpen && (
+        <DocketCollapsedHeader title={title} onClick={handleToggle} />
+      )}
+      {isMobile && isOpen && (
+        <div className="docket__mobile-wrapper">
+          <div className="docket__close-header">
+            <div className="docket__close-header-content">
+              <h2 className="docket__close-header-text">Close</h2>
+              <button
+                className="docket__close-button"
+                onClick={handleClose}
+                aria-label="Close docket">
+                <Icon name="close" size="lg" />
+              </button>
+            </div>
+          </div>
+          <div className={classes} onClick={onClick} data-testid={testId}>
+            {showHeader && (
+              <DocketHeader title={title} onMoreOptionsClick={onMoreOptionsClick} />
+            )}
+            <div className="docket__content">{renderContent()}</div>
+            {allPrices.length > 0 && (
+              <div className="docket__prices-section">
+                <DocketPrices prices={allPrices} />
+              </div>
+            )}
+            {showFooter && (
+              <DocketFooter
+                mode={mode}
+                onAddNewQuoteClick={onAddNewQuoteClick}
+                onViewClick={onViewClick}
+                onSaveClick={onSaveClick}
+                onBookNowClick={onBookNowClick}
+              />
+            )}
+          </div>
+        </div>
+      )}
+      {!isMobile && (
+        <div className={classes} onClick={onClick} data-testid={testId}>
+          {showHeader && (
+            <DocketHeader title={title} onMoreOptionsClick={onMoreOptionsClick} />
+          )}
+          <div className="docket__content">{renderContent()}</div>
+          {allPrices.length > 0 && (
+            <div className="docket__prices-section">
+              <Icon name="line" size="lg" />
+              <DocketPrices prices={allPrices} />
+              <Icon name="line" size="lg" />
+            </div>
+          )}
+          {showFooter && (
+            <DocketFooter
+              mode={mode}
+              onAddNewQuoteClick={onAddNewQuoteClick}
+              onViewClick={onViewClick}
+              onSaveClick={onSaveClick}
+              onBookNowClick={onBookNowClick}
+            />
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Docket;

package/src/components/organisms/SearchBarTransfer/index.ts

@@ -1,3 +1,5 @@
 export { default } from './SearchBarTransfer';
 export type { SearchBarTransferProps, SearchBarTransferData, TransferMode } from './SearchBarTransfer';
 
+
+