mautourco-components 0.2.22 → 0.2.24

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;