mautourco-components 0.2.23 → 0.2.25

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

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

package/src/components/molecules/ExcursionDocket/ExcursionDocket.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import '../../../styles/components/molecule/excursion-docket.css';
+import { ExcursionDocket as ExcursionDocketType } from '../../../types/docket/services.types';
+import Chip from '../../atoms/Chip/Chip';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import { DateDisplay } from '../DateDisplay/DateDisplay';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+
+export interface ExcursionDocketProps {
+  data: ExcursionDocketType;
+}
+
+export const ExcursionDocket: React.FC<ExcursionDocketProps> = ({ data }) => {
+  const {
+    ExcursionName,
+    ServiceDate,
+    SelectedHotel,
+    SelectedHotelDetails,
+    Currency,
+    TotalPrice,
+    AdultCount,
+    Duration,
+    MealIncluded,
+    Meal,
+    Accessibility,
+    VehicleType,
+    VehicleTypeName,
+  } = data;
+
+  const formatPrice = () => {
+    if (!TotalPrice) return null;
+    const price = typeof TotalPrice === 'string' ? TotalPrice : TotalPrice.toString();
+    return `${Currency} ${price}`;
+  };
+
+  return (
+    <div className="excursion-docket">
+      <div className="excursion-docket__header">
+        <div className="excursion-docket__title-section">
+          <div className="excursion-docket__title-bar" />
+          <Icon name="map-pin" size="sm" />
+          <Text variant="bold" size="sm" color="accent">
+            Excursion
+          </Text>
+        </div>
+        {TotalPrice && Currency && (
+          <Chip type="filled" color="accent" size="sm">
+            {formatPrice()}
+          </Chip>
+        )}
+      </div>
+
+      {ExcursionName && (
+        <div className="excursion-docket__excursion-name">
+          <Text variant="bold" size="base" color="default">
+            {ExcursionName}
+          </Text>
+        </div>
+      )}
+
+      <div className="excursion-docket__details">
+        {ServiceDate && (
+          <DateDisplay
+            date={ServiceDate}
+            calendarSize="sm"
+            textSize="sm"
+            colorMode="green"
+          />
+        )}
+
+        {SelectedHotel && (
+          <div className="excursion-docket__pickup">
+            <Text variant="bold" size="sm" color="subtle">
+              Pickup:{' '}
+            </Text>
+            <Text variant="medium" size="sm" color="subtle">
+              {SelectedHotel}
+            </Text>
+          </div>
+        )}
+
+        {AdultCount !== undefined && AdultCount > 0 && (
+          <TextWithIcon icon="user" textSize="sm" color="subtle">
+            {AdultCount} Adult{AdultCount > 1 ? 's' : ''}
+          </TextWithIcon>
+        )}
+
+        <div className="excursion-docket__details-list">
+          {Duration && (
+            <div className="excursion-docket__detail-item">
+              <div className="excursion-docket__detail-label">
+                <TextWithIcon
+                  icon="clock"
+                  textSize="sm"
+                  color="subtle"
+                  textLeading="none">
+                  Duration
+                </TextWithIcon>
+              </div>
+              <Text variant="medium" size="sm" color="subtle" leading="none">
+                |
+              </Text>
+              <Text variant="regular" size="sm" color="subtle" leading="none">
+                {Duration}
+              </Text>
+            </div>
+          )}
+
+          {(MealIncluded !== undefined || Meal) && (
+            <div className="excursion-docket__detail-item">
+              <div className="excursion-docket__detail-label">
+                <TextWithIcon
+                  icon="utensils"
+                  textSize="sm"
+                  color="subtle"
+                  textLeading="none">
+                  Meal
+                </TextWithIcon>
+              </div>
+              <Text variant="medium" size="sm" color="subtle" leading="none">
+                |
+              </Text>
+              <Text variant="regular" size="sm" color="subtle" leading="none">
+                {Meal || (MealIncluded ? 'Included' : 'Not included')}
+              </Text>
+            </div>
+          )}
+
+          {Accessibility && (
+            <div className="excursion-docket__detail-item">
+              <div className="excursion-docket__detail-label">
+                <TextWithIcon
+                  icon="stroller"
+                  textSize="sm"
+                  color="subtle"
+                  textLeading="none">
+                  Accessibility
+                </TextWithIcon>
+              </div>
+              <Text variant="medium" size="sm" color="subtle" leading="none">
+                |
+              </Text>
+              <Text variant="regular" size="sm" color="subtle" leading="none">
+                {Accessibility}
+              </Text>
+            </div>
+          )}
+
+          {(VehicleType || VehicleTypeName) && (
+            <div className="excursion-docket__detail-item">
+              <div className="excursion-docket__detail-label">
+                <TextWithIcon icon="car" textSize="sm" color="subtle" textLeading="none">
+                  Vehicle
+                </TextWithIcon>
+              </div>
+              <Text variant="medium" size="sm" color="subtle" leading="none">
+                |
+              </Text>
+              <Text variant="regular" size="sm" color="subtle" leading="none">
+                {VehicleTypeName || VehicleType}
+              </Text>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ExcursionDocket;

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

@@ -0,0 +1,2 @@
+export { ExcursionDocket, default } from './ExcursionDocket';
+export type { ExcursionDocketProps } from './ExcursionDocket';

package/src/components/molecules/LocationDropdown/LocationDropdown.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import '../../../styles/components/molecule/location-dropdown.css';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
-import '../../../styles/components/molecule/location-dropdown.css';
 
 export interface LocationOption {
   id: string | number;
@@ -52,7 +52,7 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   type = 'airport-port',
   maxHeight = 240,
   direction = undefined,
-  showGroupTitles = true
+  showGroupTitles = true,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -91,12 +91,12 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
     if (!selectedValue) return null;
 
     // Search in flat options
-    const flatOption = options.find(opt => opt.id === selectedValue);
+    const flatOption = options.find((opt) => opt.id === selectedValue);
     if (flatOption) return flatOption;
 
     // Search in groups
     for (const group of groups) {
-      const groupOption = group.options.find(opt => opt.id === selectedValue);
+      const groupOption = group.options.find((opt) => opt.id === selectedValue);
       if (groupOption) return groupOption;
     }
 
@@ -118,15 +118,11 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
 
   const getInputIcon = () => {
     if (selectedOption) {
-      // For airports, show arrival/departure based on direction
-      console.log({direction});
-      
       if (selectedOption.type === 'airport' && direction) {
         return direction === 'pickup' ? 'arrival' : 'departure';
       }
       return getIconForType(selectedOption.type);
     }
-    // Use arrival/departure icons based on direction for pickup/dropoff types
     if ((type === 'pickup-dropoff' || type === 'airport-port') && direction) {
       return direction === 'pickup' ? 'arrival' : 'departure';
     }
@@ -134,7 +130,6 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   };
 
   const getOptionIcon = (option: LocationOption, isSelected: boolean) => {
-    // For selected airports, show arrival/departure based on direction
     if (isSelected && option.type === 'airport' && direction) {
       return direction === 'pickup' ? 'arrival' : 'departure';
     }
@@ -182,38 +177,46 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   );
 
   return (
-    <div ref={dropdownRef} className={`location-dropdown location-dropdown--${type} ${className}`}>
+    <div
+      ref={dropdownRef}
+      className={`location-dropdown location-dropdown--${type} ${className}`}>
       {label && (
         <div className="location-dropdown__label">
-          <Text size="sm" variant="medium">{label}</Text>
+          <Text size="sm" variant="medium">
+            {label}
+          </Text>
         </div>
       )}
-      
-      <div 
+
+      <div
         className={`location-dropdown__input location-dropdown__input--${getDropdownState()}`}
-        onClick={handleToggleDropdown}
-      >
+        onClick={handleToggleDropdown}>
         <div className="location-dropdown__input-content">
-          <Icon 
-            name={getInputIcon()} 
-            size="sm" 
+          <Icon
+            name={getInputIcon()}
+            size="sm"
             className={`location-dropdown__input-icon ${!selectedOption ? 'location-dropdown__input-icon--placeholder' : ''}`}
           />
-          <span className={`location-dropdown__input-text ${!selectedOption ? 'location-dropdown__input-text--placeholder' : ''}`}>
+          <span
+            className={`location-dropdown__input-text ${!selectedOption ? 'location-dropdown__input-text--placeholder' : ''}`}>
             {displayText}
           </span>
         </div>
-        <Icon 
-          name="chevron-down" 
-          size="sm" 
-          className="location-dropdown__input-chevron" 
+        <Icon
+          name="chevron-down"
+          size="sm"
+          className="location-dropdown__input-chevron"
         />
       </div>
 
-      {isOpen && (
-        loading ? renderSkeletonLoading() : (
+      {isOpen &&
+        (loading ? (
+          renderSkeletonLoading()
+        ) : (
           <div className="location-dropdown__panel">
-            <div className="location-dropdown__content" style={{ maxHeight: `${maxHeight}px` }}>
+            <div
+              className="location-dropdown__content"
+              style={{ maxHeight: `${maxHeight}px` }}>
               <div className="location-dropdown__options-wrapper">
                 {allOptions.map((group, groupIndex) => (
                   <div key={group.id} className="location-dropdown__group">
@@ -221,26 +224,27 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
                       <>
                         {groupIndex > 0 && <div className="location-dropdown__divider" />}
                         <div className="location-dropdown__group-header">
-                          <Text size="xs" variant="bold">{group.label}</Text>
+                          <Text size="xs" variant="bold">
+                            {group.label}
+                          </Text>
                         </div>
                       </>
                     )}
-                    
+
                     <div className="location-dropdown__group-options">
                       {group.options.map((option) => {
                         const isSelected = selectedValue === option.id;
                         const isDisabled = option.disabled || disabled;
-                        
+
                         return (
                           <div
                             key={option.id}
                             className={`location-dropdown__option ${isSelected ? 'location-dropdown__option--selected' : ''} ${isDisabled ? 'location-dropdown__option--disabled' : ''}`}
-                            onClick={() => !isDisabled && handleOptionSelect(option)}
-                          >
-                            <Icon 
-                              name={getOptionIcon(option, isSelected)} 
-                              size="sm" 
-                              className="location-dropdown__option-icon" 
+                            onClick={() => !isDisabled && handleOptionSelect(option)}>
+                            <Icon
+                              name={getOptionIcon(option, isSelected)}
+                              size="sm"
+                              className="location-dropdown__option-icon"
                             />
                             <span className="location-dropdown__option-text">
                               {option.label}
@@ -254,8 +258,7 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
               </div>
             </div>
           </div>
-        )
-      )}
+        ))}
     </div>
   );
 };

package/src/components/molecules/OtherServiceDocket/OtherServiceDocket.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import '../../../styles/components/molecule/other-service-docket.css';
+import { OtherServiceDocket as OtherServiceDocketType } from '../../../types/docket/services.types';
+import Chip from '../../atoms/Chip/Chip';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+
+export interface OtherServiceDocketProps {
+  data: OtherServiceDocketType;
+}
+
+export const OtherServiceDocket: React.FC<OtherServiceDocketProps> = ({ data }) => {
+  const { service_for, Currency, TotalPrice, AdultCount } = data;
+
+  const formatPrice = () => {
+    if (!TotalPrice) return null;
+    const price = typeof TotalPrice === 'string' ? TotalPrice : TotalPrice.toString();
+    return `${Currency} ${price}`;
+  };
+
+  return (
+    <div className="other-service-docket">
+      <div className="other-service-docket__header">
+        <div className="other-service-docket__title-section">
+          <div className="other-service-docket__title-bar" />
+          <Icon name="more" size="sm" />
+          <Text variant="bold" size="sm" color="accent">
+            Other services
+          </Text>
+        </div>
+        {TotalPrice && Currency && (
+          <Chip type="filled" color="accent" size="sm">
+            {formatPrice()}
+          </Chip>
+        )}
+      </div>
+
+      <div className="other-service-docket__details">
+        <div className="other-service-docket__service-info">
+          {service_for && (
+            <TextWithIcon icon="wallet" textSize="sm" color="subtle">
+              {service_for}
+            </TextWithIcon>
+          )}
+        </div>
+
+        {AdultCount !== undefined && AdultCount > 0 && (
+          <TextWithIcon icon="user" textSize="sm" color="subtle">
+            {AdultCount} Adult{AdultCount > 1 ? 's' : ''}
+          </TextWithIcon>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default OtherServiceDocket;

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

@@ -0,0 +1,2 @@
+export { default, OtherServiceDocket } from './OtherServiceDocket';
+export type { OtherServiceDocketProps } from './OtherServiceDocket';

package/src/components/molecules/PriceDisplay/PriceDisplay.css

@@ -0,0 +1,24 @@
+.price-display {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--chip-spacing-sm-gap, 4px);
+  padding: var(--chip-spacing-sm-padding-y, 4px) var(--chip-spacing-sm-padding-x, 8px);
+  border-radius: var(--chip-border-radius-pill, 9999px);
+  background-color: var(--chip-color-accent-filled-background, #0f7173);
+  color: var(--chip-color-accent-filled-foreground, #ffffff);
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
+  font-weight: var(--font-weight-font-medium, 500);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: calc(var(--font-leading-leading-base, 16) * 1px);
+  letter-spacing: var(--font-tracking-tracking-normal, 0px);
+  white-space: nowrap;
+  opacity: var(--opacity-opacity-100, 1);
+}
+
+.price-display__text {
+  display: inline-block;
+}
+

package/src/components/molecules/PriceDisplay/PriceDisplay.tsx

@@ -0,0 +1,179 @@
+import React, { useMemo } from 'react';
+import './PriceDisplay.css';
+
+export interface PriceDisplayProps {
+  /** Currency code (e.g., "MUR", "USD", "EUR") */
+  currency: string;
+  /** Price value as number or string */
+  price: number | string;
+  /** Thousand separator character (default: ",") */
+  thousandSeparator?: string;
+  /** Decimal separator character (default: ".") */
+  decimalSeparator?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * Checks if a string price is already properly formatted
+ * @param priceString - The price string to check
+ * @param thousandSeparator - The expected thousand separator
+ * @param decimalSeparator - The expected decimal separator
+ * @returns true if the string appears to be already formatted
+ */
+const isPriceAlreadyFormatted = (
+  priceString: string,
+  thousandSeparator: string,
+  decimalSeparator: string
+): boolean => {
+  // Remove currency code and whitespace for checking
+  const cleaned = priceString.trim();
+  
+  // Check if it contains the expected separators
+  const hasThousandSep = thousandSeparator !== '' && cleaned.includes(thousandSeparator);
+  const hasDecimalSep = cleaned.includes(decimalSeparator);
+  
+  // If it has both separators or decimal separator, it's likely already formatted
+  if (hasDecimalSep || hasThousandSep) {
+    // Additional check: ensure it's a valid number format
+    const numberPart = cleaned.replace(/[^\d.,-]/g, '').replace(thousandSeparator, '').replace(decimalSeparator, '.');
+    return !isNaN(parseFloat(numberPart));
+  }
+  
+  return false;
+};
+
+/**
+ * Formats a number with custom thousand and decimal separators
+ * @param value - The numeric value to format
+ * @param thousandSeparator - The thousand separator to use
+ * @param decimalSeparator - The decimal separator to use
+ * @returns Formatted price string
+ */
+const formatPrice = (
+  value: number,
+  thousandSeparator: string,
+  decimalSeparator: string
+): string => {
+  // Convert to string with 2 decimal places
+  const parts = value.toFixed(2).split('.');
+  const integerPart = parts[0];
+  const decimalPart = parts[1];
+
+  // Add thousand separators to integer part
+  const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
+
+  // Combine with decimal separator
+  return `${formattedInteger}${decimalSeparator}${decimalPart}`;
+};
+
+/**
+ * Parses a string price to a number, handling various formats
+ * @param priceString - The price string to parse
+ * @param thousandSeparator - The thousand separator used in the string
+ * @param decimalSeparator - The decimal separator used in the string
+ * @returns The parsed number or NaN if invalid
+ */
+const parsePriceString = (
+  priceString: string,
+  thousandSeparator: string,
+  decimalSeparator: string
+): number => {
+  // Remove currency code, whitespace, and other non-numeric characters except separators
+  let cleaned = priceString.trim();
+  
+  // Remove currency code if present at the start
+  cleaned = cleaned.replace(/^[A-Z]{3}\s*/i, '');
+  
+  // Replace thousand separator with nothing
+  if (thousandSeparator) {
+    cleaned = cleaned.replace(new RegExp(`\\${thousandSeparator}`, 'g'), '');
+  }
+  
+  // Replace decimal separator with dot for parsing
+  if (decimalSeparator !== '.') {
+    cleaned = cleaned.replace(new RegExp(`\\${decimalSeparator}`, 'g'), '.');
+  }
+  
+  return parseFloat(cleaned);
+};
+
+/**
+ * A component for displaying prices with currency in a chip-like style.
+ * Supports both number and string prices, with customizable separators.
+ *
+ * @example
+ * <PriceDisplay currency="MUR" price={3800} />
+ * <PriceDisplay currency="USD" price="1,234.56" thousandSeparator="," decimalSeparator="." />
+ * @param PriceDisplayProps
+ * @returns
+ */
+export const PriceDisplay: React.FC<PriceDisplayProps> = ({
+  currency,
+  price,
+  thousandSeparator = ',',
+  decimalSeparator = '.',
+  className = '',
+}) => {
+  const formattedPrice = useMemo(() => {
+    // Handle number type
+    if (typeof price === 'number') {
+      if (isNaN(price)) {
+        return '0.00';
+      }
+      return formatPrice(price, thousandSeparator, decimalSeparator);
+    }
+
+    // Handle string type
+    if (typeof price === 'string') {
+      const trimmed = price.trim();
+      
+      // Handle empty string
+      if (trimmed === '') {
+        return '0.00';
+      }
+
+      // Check if already formatted correctly
+      if (isPriceAlreadyFormatted(trimmed, thousandSeparator, decimalSeparator)) {
+        // Remove currency code if present (3-letter code at start) and return the formatted part
+        const cleaned = trimmed.replace(/^[A-Z]{2,4}\s+/i, '').trim();
+        // If after removing currency we have nothing, it was just a currency code
+        if (cleaned === '') {
+          return '0.00';
+        }
+        return cleaned;
+      }
+
+      // Parse and reformat
+      const numericValue = parsePriceString(trimmed, thousandSeparator, decimalSeparator);
+      if (!isNaN(numericValue)) {
+        return formatPrice(numericValue, thousandSeparator, decimalSeparator);
+      }
+
+      // If parsing fails, try to extract just the number part
+      const numberMatch = trimmed.match(/[\d.,-]+/);
+      if (numberMatch) {
+        const extractedNumber = parsePriceString(numberMatch[0], thousandSeparator, decimalSeparator);
+        if (!isNaN(extractedNumber)) {
+          return formatPrice(extractedNumber, thousandSeparator, decimalSeparator);
+        }
+      }
+
+      // Last resort: return the original string (fallback)
+      return trimmed;
+    }
+
+    return String(price);
+  }, [price, thousandSeparator, decimalSeparator]);
+
+  return (
+    <div className={`price-display ${className}`}>
+      <span className="price-display__text">
+        {currency} {formattedPrice}
+      </span>
+    </div>
+  );
+};
+
+export default PriceDisplay;
+

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

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