mautourco-components 0.2.12 → 0.2.14

package/src/components/organisms/MultipleQuotationDocket/MultipleQuotationDocket.tsx

@@ -0,0 +1,349 @@
+import React from 'react';
+import Button from '../../atoms/Button/Button';
+import Chip from '../../atoms/Chip/Chip';
+import Icon, { IconName } from '../../atoms/Icon/Icon';
+import { Heading, Text } from '../../atoms/Typography/Typography';
+import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
+import CardContainer from '../CardContainer/CardContainer';
+
+export type DocketServiceType =
+  | 'Accommodation'
+  | 'Transfer'
+  | 'Handling fee'
+  | 'Excursion'
+  | 'Other Services';
+
+export interface DocketDetailsData {
+  /** Service type */
+  type: DocketServiceType;
+  /** Service name/title */
+  serviceName?: string;
+  /** Price for this service */
+  price: string;
+  /** Currency for the price */
+  currency: string;
+  /** Start date */
+  startDate?: string;
+  /** End date */
+  endDate?: string;
+  /** Number of nights */
+  nights?: number;
+  /** Client type */
+  clientType?: string;
+  /** Adults count */
+  adults?: number;
+  /** Children details */
+  children?: Array<{ age: number }>;
+  /** Room type */
+  roomType?: string;
+  /** Meal plan */
+  mealPlan?: string;
+  /** Additional details to display */
+  details?: Array<{
+    icon: IconName;
+    label: string;
+    value: string;
+  }>;
+  /** Error message to display (e.g., "Please select your second room") */
+  errorMessage?: string;
+}
+
+export interface MultipleQuotationDocketProps {
+  /** Title of the quotation */
+  title?: string;
+  /** List of service details */
+  services: DocketDetailsData[];
+  /** Total prices in different currencies */
+  totalPrices: Array<{ currency: string; amount: string }>;
+  /** Callback when "More options" is clicked */
+  onMoreOptionsClick?: () => void;
+  /** Callback when "Add new quote" is clicked */
+  onAddNewQuoteClick?: () => void;
+  /** Callback when "View" is clicked */
+  onViewClick?: () => void;
+  /** Callback when "Save" is clicked */
+  onSaveClick?: () => void;
+  /** Callback when "Book now" is clicked */
+  onBookNowClick?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const getServiceIcon = (type: DocketServiceType): IconName => {
+  switch (type) {
+    case 'Accommodation':
+      return 'accom';
+    case 'Transfer':
+      return 'bus';
+    case 'Excursion':
+      return 'map-pin';
+    case 'Handling fee':
+      return 'wallet';
+    case 'Other Services':
+      return 'more';
+    default:
+      return 'more';
+  }
+};
+
+const DocketDetails: React.FC<{ data: DocketDetailsData }> = ({ data }) => {
+  const {
+    type,
+    serviceName,
+    startDate,
+    endDate,
+    nights,
+    clientType,
+    adults,
+    children,
+    roomType,
+    mealPlan,
+    details,
+    errorMessage,
+  } = data;
+  const icon = getServiceIcon(type);
+
+  return (
+    <div className="multiple-quotation-docket__details">
+      {errorMessage && (
+        <div className="multiple-quotation-docket__error">
+          <Text variant="bold" size="sm" color="state-error">
+            {errorMessage}
+          </Text>
+        </div>
+      )}
+
+      {serviceName && (
+        <div className="multiple-quotation-docket__service-name">
+          <Text variant="bold" size="base">
+            {serviceName}
+          </Text>
+        </div>
+      )}
+
+      {(startDate || endDate || nights) && (
+        <div className="multiple-quotation-docket__date-info">
+          {startDate && endDate && (
+            <div className="multiple-quotation-docket__date-range">
+              <TextWithIcon icon="calendar-range-outline" color="accent">
+                {startDate}
+              </TextWithIcon>
+              <Icon name="arrow-right-outline" size="sm" />
+              <TextWithIcon icon="calendar-range-outline" color="accent">
+                {endDate}
+              </TextWithIcon>
+            </div>
+          )}
+          {nights !== undefined && (
+            <TextWithIcon icon="night" color="subtle">
+              {nights} nights
+            </TextWithIcon>
+          )}
+        </div>
+      )}
+
+      {(clientType || adults || children) && (
+        <div className="multiple-quotation-docket__client-info">
+          {clientType && (
+            <div className="multiple-quotation-docket__client-type">
+              <Text variant="bold" size="sm" color="subtle">
+                Client type:
+              </Text>
+              <Text variant="medium" size="sm" color="subtle">
+                {clientType}
+              </Text>
+            </div>
+          )}
+
+          <div className="multiple-quotation-docket__guests">
+            {adults !== undefined && (
+              <TextWithIcon icon="user" color="subtle">
+                {adults} Adults
+              </TextWithIcon>
+            )}
+            {children && children.length > 0 && (
+              <div className="multiple-quotation-docket__children">
+                {children.map((child, index) => (
+                  <div key={index} className="multiple-quotation-docket__child">
+                    <TextWithIcon icon="user" color="subtle">
+                      <span>
+                        <span>1 Child </span>
+                        <span className="multiple-quotation-docket__child-age">
+                          ({child.age} y.o)
+                        </span>
+                      </span>
+                    </TextWithIcon>
+                    {index < children.length - 1 && (
+                      <div className="multiple-quotation-docket__divider" />
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {(roomType || mealPlan) && (
+        <div className="multiple-quotation-docket__room-info">
+          {roomType && (
+            <TextWithIcon icon="accom" color="subtle">
+              {roomType}
+            </TextWithIcon>
+          )}
+          {mealPlan && (
+            <div className="multiple-quotation-docket__meal-plan">
+              <TextWithIcon icon="utensils" color="subtle">
+                Meal-Plan
+              </TextWithIcon>
+              <div className="multiple-quotation-docket__divider" />
+              <Text variant="medium" size="sm" color="subtle">
+                {mealPlan}
+              </Text>
+            </div>
+          )}
+        </div>
+      )}
+
+      {details && details.length > 0 && (
+        <div className="multiple-quotation-docket__additional-details">
+          {details.map((detail, index) => (
+            <TextWithIcon key={index} icon={detail.icon} color="subtle">
+              {detail.label}: {detail.value}
+            </TextWithIcon>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const MultipleQuotationDocket: React.FC<MultipleQuotationDocketProps> = ({
+  title = 'Your quotation',
+  services,
+  totalPrices,
+  onMoreOptionsClick,
+  onAddNewQuoteClick,
+  onViewClick,
+  onSaveClick,
+  onBookNowClick,
+  className = '',
+}) => {
+  return (
+    <CardContainer spacing="chill" className={`multiple-quotation-docket ${className}`}>
+      {/* Header */}
+      <div className="multiple-quotation-docket__header">
+        <div className="multiple-quotation-docket__title">
+          <Icon name="quotation" size="lg" />
+          <Heading
+            level={4}
+            variant="bold"
+            className="multiple-quotation-docket__title-text">
+            {title}
+          </Heading>
+        </div>
+        {onMoreOptionsClick && (
+          <Chip
+            type="outline"
+            color="neutral"
+            size="sm"
+            trailingIcon="chevron-down"
+            onClick={onMoreOptionsClick}
+            className="multiple-quotation-docket__more-options">
+            More options
+          </Chip>
+        )}
+      </div>
+
+      {/* Services List */}
+      <div className="multiple-quotation-docket__services">
+        {services.map((service, index) => (
+          <div key={index} className="multiple-quotation-docket__service">
+            <div className="multiple-quotation-docket__service-header">
+              <div className="multiple-quotation-docket__service-title">
+                <div className="multiple-quotation-docket__section-bar" />
+                <Icon
+                  name={getServiceIcon(service.type)}
+                  size="sm"
+                  color="var(--color-icon-branded, #0f7173)"
+                />
+                <Text variant="bold" size="sm" color="accent">
+                  {service.type}
+                </Text>
+              </div>
+              <Chip type="filled" color="accent" size="sm">
+                {service.currency} {service.price}
+              </Chip>
+            </div>
+            <DocketDetails data={service} />
+          </div>
+        ))}
+      </div>
+
+      {/* Total Section */}
+      {totalPrices.length > 0 && (
+        <div className="multiple-quotation-docket__total">
+          <div className="multiple-quotation-docket__total-line" />
+          <div className="multiple-quotation-docket__total-content">
+            <Text variant="bold" size="sm">
+              Total :
+            </Text>
+            <div className="multiple-quotation-docket__total-prices">
+              {totalPrices.map((total, index) => (
+                <Text key={index} variant="bold" size="sm">
+                  {total.currency} {total.amount}
+                </Text>
+              ))}
+            </div>
+          </div>
+          <div className="multiple-quotation-docket__total-line" />
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="multiple-quotation-docket__actions">
+        {onAddNewQuoteClick && (
+          <Button
+            variant="outline-secondary"
+            size="sm"
+            leadingIcon="plus"
+            onClick={onAddNewQuoteClick}
+            className="multiple-quotation-docket__action-button">
+            Add new quote
+          </Button>
+        )}
+        <div className="multiple-quotation-docket__action-group">
+          {onViewClick && (
+            <Button
+              variant="outline-secondary"
+              size="sm"
+              onClick={onViewClick}
+              className="multiple-quotation-docket__action-button multiple-quotation-docket__action-button--flex">
+              View
+            </Button>
+          )}
+          {onSaveClick && (
+            <Button
+              variant="outline-secondary"
+              size="sm"
+              onClick={onSaveClick}
+              className="multiple-quotation-docket__action-button multiple-quotation-docket__action-button--flex">
+              Save
+            </Button>
+          )}
+          {onBookNowClick && (
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={onBookNowClick}
+              className="multiple-quotation-docket__action-button multiple-quotation-docket__action-button--book">
+              Book now
+            </Button>
+          )}
+        </div>
+      </div>
+    </CardContainer>
+  );
+};
+
+export default MultipleQuotationDocket;

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

@@ -0,0 +1,6 @@
+export { MultipleQuotationDocket, default } from './MultipleQuotationDocket';
+export type {
+  DocketDetailsData,
+  DocketServiceType,
+  MultipleQuotationDocketProps,
+} from './MultipleQuotationDocket';

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

@@ -0,0 +1,185 @@
+.table-container {
+  overflow-y: hidden;
+  overflow-x: auto;
+  max-width: 1680px;
+  &.table-container--no-total {
+    padding-bottom: var(--spacing-padding-px-4);
+  }
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  th,
+  td {
+    padding-inline: var(--spacing-padding-px-4);
+  }
+}
+.table__header {
+  th {
+    @apply h-11 text-left;
+    background-color: var(--color-elevation-level-2);
+  }
+}
+.table__body {
+  tr {
+    @apply transition-colors duration-200;
+    border-top: solid 1px var(--color-surface-300);
+    &: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 {
+        background-color: var(--color-yellow-100);
+      }
+      & + tr {
+        border-top: none;
+      }
+    }
+    &.table__row-border-0 {
+      border-top: none;
+      &:not(:nth-of-type(1)) {
+        td {
+          vertical-align: top;
+          padding-top: 0;
+        }
+      }
+    }
+  }
+  td {
+    padding-block: var(--spacing-padding-px-4);
+    &.table__cell-nested {
+      padding: 0;
+      overflow: hidden;
+      tr:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+  .table__nested-wrapper {
+    overflow: hidden;
+    display: block;
+  }
+  .button__icon {
+    @apply transition-transform duration-200;
+  }
+}
+
+.table__row-nested {
+  border-left: solid 4px var(--color-primary-brand);
+}
+
+.table__button-expanded {
+  .button__icon {
+    @apply rotate-180;
+  }
+}
+
+.table__row-clickable {
+  cursor: pointer;
+}
+
+.table__button {
+  width: 136px;
+}
+
+.table__row-grouped {
+  > td {
+    padding: 0;
+  }
+}
+
+.table__total-container {
+  max-width: 1680px;
+}
+
+.table__total {
+  tr {
+    border: 1px solid transparent;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      inset: -1px;
+      pointer-events: none;
+      background-image:
+        repeating-linear-gradient(
+          to right,
+          var(--divider-color-default) 0,
+          var(--divider-color-default) 12px,
+          transparent 12px,
+          transparent 24px
+        ),
+        repeating-linear-gradient(
+          to right,
+          var(--divider-color-default) 0,
+          var(--divider-color-default) 12px,
+          transparent 12px,
+          transparent 24px
+        );
+      background-size:
+        100% 1px,
+        100% 1px;
+      background-position: top, bottom;
+      background-repeat: repeat-x, repeat-x;
+    }
+  }
+  td {
+    padding-block: var(--spacing-padding-px-4);
+    &:last-child {
+      width: 160px;
+      @media (min-width: 1680px) {
+        width: var(--last-column-width);
+      }
+    }
+  }
+}