mautourco-components 0.2.142 → 0.2.144

package/src/components/molecules/LanguageSelector/LanguageSelector.css

@@ -0,0 +1,83 @@
+/* Language Selector - Trigger */
+.language-selector__trigger {
+  @apply flex items-center justify-center gap-2 cursor-pointer;
+  @apply px-4;
+  height: 44px;
+  border: solid 1px var(--color-tuna-500);
+  border-radius: 12px;
+  transition: all 0.5s ease;
+  &:hover {
+    border-color: #262626;
+  }
+  &.language-selector__trigger--with-text {
+    border-color: #262626;
+    color: #262626;
+  }
+}
+
+.language-selector__placeholder {
+  color: var(--color-tuna-500);
+}
+
+.language-selector__trigger-icon {
+  @apply flex-shrink-0 text-[var(--color-neutral-800)];
+}
+
+.language-selector__trigger-text {
+  @apply text-sm font-medium text-[var(--color-neutral-800)];
+}
+
+.language-selector__trigger-chevron {
+  @apply flex-shrink-0 text-[var(--color-neutral-800)] transition-transform duration-200;
+}
+
+.language-selector__trigger[data-state='open'] .language-selector__trigger-chevron {
+  transform: rotate(180deg);
+}
+
+/* Popover */
+.language-selector__popover {
+  @apply bg-white;
+  padding: var(--spacing-padding-px-2);
+  border-radius: var(--border-radius-rounded-xl);
+  min-width: 8rem;
+}
+
+/* Popover Content */
+.language-selector__content {
+  @apply flex flex-col py-1 bg-white;
+  min-width: 8rem;
+}
+
+.language-selector__option {
+  @apply flex items-center w-full cursor-pointer gap-x-2;
+  height: 2.25rem;
+  padding-inline: var(--spacing-padding-px-3);
+  border-radius: var(--border-radius-rounded-md);
+  font-size: var(--typography-font-size-sm);
+  font-weight: var(--typography-font-weight-medium);
+  color: var(--color-neutral-800);
+  transition: background-color 0.2s ease;
+}
+
+.language-selector__option:hover {
+  background-color: var(--color-neutral-100);
+}
+
+.language-selector__option--selected {
+  background-color: var(--color-neutral-100);
+}
+
+.language-selector__selected-language {
+  @apply flex gap-x-2 items-center;
+}
+
+.language-selector__flag {
+  @apply flex items-center justify-center;
+  @apply grow-0 shrink-0 basis-4 h-4;
+  @apply rounded-full overflow-hidden;
+  .fi {
+    @apply w-4;
+    flex: 0 0 1.333333em;
+  }
+}

package/src/components/molecules/LanguageSelector/LanguageSelector.tsx

@@ -0,0 +1,102 @@
+import { cn } from '@/src/lib/utils';
+import 'flag-icons/css/flag-icons.min.css';
+import { useEffect, useState } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
+import { languagesMap } from '../ServiceLanguages/constant';
+import './LanguageSelector.css';
+
+export const defaultLanguages = ['English', 'Français', 'German', 'Italian'];
+
+export interface LanguageSelectorProps {
+  languages?: string[];
+  defaultLanguage?: string;
+  placeholder?: string;
+  onSelectLanguage?: (language: string) => void;
+  label?: string;
+}
+
+export default function LanguageSelector(props: LanguageSelectorProps) {
+  const {
+    languages = defaultLanguages,
+    defaultLanguage,
+    placeholder = 'Prefered language',
+    label,
+    onSelectLanguage,
+  } = props;
+
+  const [open, setOpen] = useState(false);
+  const [selectedLanguage, setSelectedLanguage] = useState<string | undefined>(
+    defaultLanguage
+  );
+
+  const handleSelectLanguage = (language: string) => {
+    setSelectedLanguage(language);
+    onSelectLanguage?.(language);
+    setOpen(false);
+  };
+
+  useEffect(() => {
+    setSelectedLanguage(defaultLanguage);
+  }, [defaultLanguage]);
+
+  return (
+    <div>
+      {label && (
+        <label className="mb-2">
+          <Text size="sm" as="span">
+            {label}
+          </Text>
+        </label>
+      )}
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            className={cn('language-selector__trigger', {
+              'language-selector__trigger--with-text': !!selectedLanguage,
+            })}>
+            {selectedLanguage ? (
+              <span className="language-selector__selected-language">
+                <span className="language-selector__flag">
+                  <i
+                    className={`fi fi-${languagesMap[selectedLanguage.toLowerCase()]}`}></i>
+                </span>
+                {selectedLanguage}
+              </span>
+            ) : (
+              <span className="language-selector__placeholder">{placeholder}</span>
+            )}
+            <Icon
+              name="chevron-down"
+              size="sm"
+              className="language-selector__trigger-chevron"
+            />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="language-selector__popover"
+          align="end"
+          side="bottom"
+          sideOffset={8}>
+          <div className="language-selector__content">
+            {languages.map((language) => (
+              <div
+                className={cn('language-selector__option', {
+                  'language-selector__option--selected': selectedLanguage === language,
+                })}
+                onClick={() => handleSelectLanguage(language)}
+                key={language}>
+                <span className="language-selector__flag">
+                  <i className={`fi fi-${languagesMap[language.toLowerCase()]}`}></i>
+                </span>
+                {language}
+              </div>
+            ))}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/src/components/molecules/TextWithIcon/TextWithIcon.tsx

@@ -56,7 +56,7 @@ function TextWithIcon(props: TextWithIconProps) {
   return (
     <div
       className={cn(
-        'flex gap-x-2',
+        'flex gap-x-2 items-center',
         color === 'yellow' && 'text-[var(--color-yellow-600)]',
         color === 'accent' && 'text-[var(--color-text-accent)]'
       )}>

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

@@ -1,5 +1,6 @@
 import { ProposalSorted } from '@/src/types/docket/docket.types';
 import React, { useEffect, useState } from 'react';
+import { Breakpoint } from '../../../hooks/useMobile';
 import '../../../styles/components/organism/docket.css';
 import {
   AccommodationService,
@@ -18,19 +19,30 @@ import { TransferDocket } from '../../molecules/TransferDocket/TransferDocket';
 import DocketAccordion from '../DocketAccordion/DocketAccordion';
 import { DocketCollapsedHeader } from './DocketCollapsedHeader';
 import { DocketEmptyState } from './DocketEmptyState';
-import { DocketFooter } from './DocketFooter';
+import { DocketFooter, DocketFooterLabelsType } from './DocketFooter';
 import { DocketHeader } from './DocketHeader';
 
 // Re-export sub-components and their props
 export { DocketCollapsedHeader } from './DocketCollapsedHeader';
 export type { DocketCollapsedHeaderProps } from './DocketCollapsedHeader';
 export { DocketEmptyState } from './DocketEmptyState';
-export type { DocketEmptyStateProps } from './DocketEmptyState';
+export type {
+  DocketEmptyStateLabelsType,
+  DocketEmptyStateProps,
+} from './DocketEmptyState';
 export { DocketFooter } from './DocketFooter';
 export type { DocketFooterProps } from './DocketFooter';
 export { DocketHeader } from './DocketHeader';
 export type { DocketHeaderProps } from './DocketHeader';
 
+export type DocketLabelsType = {
+  manageQuotation: string;
+  close: string;
+  /** Bold part of the empty state message */
+  emptyStateBold?: string;
+  /** Regular part of the empty state message */
+  emptyStateRegular?: string;
+} & DocketFooterLabelsType;
 export interface DocketProps {
   /**
    * Array of nested Docket objects
@@ -128,11 +140,6 @@ export interface DocketProps {
    */
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 
-  /**
-   * Optional data attributes for testing or tracking
-   */
-  'data-testid'?: string;
-
   /**
    * Remove mode - replaces price chips with remove buttons in all service dockets
    */
@@ -143,6 +150,31 @@ export interface DocketProps {
    * Receives the service index and service data
    */
   onServiceRemove?: (index: number, service: DocketService) => void;
+
+  /**
+   * Button done mode - replaces the "Book now" button with a "Done" button
+   */
+  doneButtonMode?: boolean;
+
+  /**
+   * Handler for the "Done" button click
+   */
+  onDoneClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Labels for the docket
+   */
+  labels?: DocketLabelsType;
+
+  /**
+   * Maximum number of proposals
+   */
+  maxProposals?: number;
+
+  /**
+   * URL of the empty state illustration image (when there are no proposals or no services)
+   */
+  emptyStateImageUrl?: string;
 }
 
 /**
@@ -150,7 +182,7 @@ export interface DocketProps {
  * It provides a structured layout for travel booking summaries with sections
  * for accommodation, services, pricing, and actions.
  */
-export const Docket: React.FC<DocketProps> = ({
+export function Docket({
   proposals,
   activeProposal: initialActiveProposal = 0,
   onProposalSelect,
@@ -166,10 +198,25 @@ export const Docket: React.FC<DocketProps> = ({
   className = '',
   containerClassName = '',
   onClick,
-  'data-testid': testId,
   removeMode = false,
   onServiceRemove,
-}) => {
+  doneButtonMode = false,
+  onDoneClick,
+  maxProposals = 5,
+  emptyStateImageUrl,
+  labels = {
+    manageQuotation: 'Manage quotation',
+    close: 'Close',
+    addNewQuote: 'Add new quote',
+    compare: 'Compare',
+    view: 'View',
+    save: 'Save',
+    bookNow: 'Book now',
+    done: 'Done',
+    emptyStateBold: 'Start by adding a service here—',
+    emptyStateRegular: "you'll be able to create and compare multiple quotations.",
+  },
+}: DocketProps): React.ReactElement {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [isMobile, setIsMobile] = useState<boolean>(false);
   const [expandedProposalIndex, setExpandedProposalIndex] =
@@ -177,7 +224,7 @@ export const Docket: React.FC<DocketProps> = ({
 
   useEffect(() => {
     const checkMobile = () => {
-      setIsMobile(window.innerWidth < 1024); // Tablet and mobile breakpoint
+      setIsMobile(window.innerWidth < Breakpoint.LG); // Desktop S breakpoint (1440px)
     };
 
     checkMobile();
@@ -260,7 +307,16 @@ export const Docket: React.FC<DocketProps> = ({
 
   const renderContent = () => {
     if (!proposals || proposals.length === 0) {
-      return <DocketEmptyState />;
+      return (
+        <DocketEmptyState
+          imageUrl={emptyStateImageUrl}
+          labels={
+            labels?.emptyStateBold != null && labels?.emptyStateRegular != null
+              ? { bold: labels.emptyStateBold, regular: labels.emptyStateRegular }
+              : undefined
+          }
+        />
+      );
     }
 
     // If there are multiple proposals, render each in a DocketAccordion
@@ -276,6 +332,13 @@ export const Docket: React.FC<DocketProps> = ({
               expanded={index === expandedProposalIndex}
               onExpandedChange={(isExpanded) => handleProposalToggle(index, isExpanded)}
               moreOptions={accordionMoreOptions}
+              manageQuotationLabel={labels?.manageQuotation}
+              emptyStateImageUrl={emptyStateImageUrl}
+              emptyStateLabels={
+                labels?.emptyStateBold != null && labels?.emptyStateRegular != null
+                  ? { bold: labels.emptyStateBold, regular: labels.emptyStateRegular }
+                  : undefined
+              }
             />
           ))}
         </div>
@@ -287,7 +350,16 @@ export const Docket: React.FC<DocketProps> = ({
     const allServices = currentProposal.Services || [];
 
     if (allServices.length === 0) {
-      return <DocketEmptyState />;
+      return (
+        <DocketEmptyState
+          imageUrl={emptyStateImageUrl}
+          labels={
+            labels?.emptyStateBold != null && labels?.emptyStateRegular != null
+              ? { bold: labels.emptyStateBold, regular: labels.emptyStateRegular }
+              : undefined
+          }
+        />
+      );
     }
 
     const renderedServices = allServices
@@ -295,7 +367,16 @@ export const Docket: React.FC<DocketProps> = ({
       .filter(Boolean);
 
     if (renderedServices.length === 0) {
-      return <DocketEmptyState />;
+      return (
+        <DocketEmptyState
+          imageUrl={emptyStateImageUrl}
+          labels={
+            labels?.emptyStateBold != null && labels?.emptyStateRegular != null
+              ? { bold: labels.emptyStateBold, regular: labels.emptyStateRegular }
+              : undefined
+          }
+        />
+      );
     }
 
     return <div className="docket__services">{renderedServices}</div>;
@@ -305,7 +386,7 @@ export const Docket: React.FC<DocketProps> = ({
   const allPrices = proposals && proposals.length === 1 ? proposals[0].Prices || [] : [];
 
   const renderDocketContent = () => (
-    <div className={classes} onClick={onClick} data-testid={testId}>
+    <div className={classes} onClick={onClick}>
       <DocketHeader
         title={title}
         moreOptions={moreOptions}
@@ -326,6 +407,10 @@ export const Docket: React.FC<DocketProps> = ({
         onViewClick={onViewClick}
         onSaveClick={onSaveClick}
         onBookNowClick={onBookNowClick}
+        doneButtonMode={doneButtonMode}
+        onDoneClick={onDoneClick}
+        labels={labels}
+        disableAddNewQuoteButton={proposals ? proposals.length >= maxProposals : false}
       />
     </div>
   );
@@ -341,23 +426,20 @@ export const Docket: React.FC<DocketProps> = ({
       )}
       {isMobile && isOpen && (
         <div className="docket__mobile-wrapper">
-          <div className="docket__close-header">
+          <button className="docket__close-header" onClick={handleClose}>
             <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">
+              <h2 className="docket__close-header-text">{labels?.close}</h2>
+              <div className="docket__close-button" aria-label="Close docket">
                 <Icon name="close" size="lg" />
-              </button>
+              </div>
             </div>
-          </div>
+          </button>
           {renderDocketContent()}
         </div>
       )}
       {!isMobile && renderDocketContent()}
     </div>
   );
-};
+}
 
 export default Docket;

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

@@ -1,6 +1,23 @@
 import React from 'react';
 
+export type DocketEmptyStateLabelsType = {
+  /** Bold part of the empty state message */
+  bold: string;
+  /** Regular part of the empty state message */
+  regular: string;
+};
+
 export interface DocketEmptyStateProps {
+  /**
+   * URL of the empty state illustration image
+   */
+  imageUrl?: string;
+
+  /**
+   * Labels for the empty state text (bold and regular parts)
+   */
+  labels?: DocketEmptyStateLabelsType;
+
   /**
    * Additional CSS classes
    */
@@ -10,7 +27,16 @@ export interface DocketEmptyStateProps {
 /**
  * Empty state component for docket when no content is provided
  */
+const DEFAULT_EMPTY_STATE_IMAGE = '/images/docket-empty-illustration.svg';
+
+const DEFAULT_EMPTY_STATE_LABELS: DocketEmptyStateLabelsType = {
+  bold: 'Start by adding a service here—',
+  regular: "you'll be able to create and compare multiple quotations.",
+};
+
 export const DocketEmptyState: React.FC<DocketEmptyStateProps> = ({
+  imageUrl = DEFAULT_EMPTY_STATE_IMAGE,
+  labels = DEFAULT_EMPTY_STATE_LABELS,
   className = '',
 }) => {
   return (
@@ -18,18 +44,14 @@ export const DocketEmptyState: React.FC<DocketEmptyStateProps> = ({
       <div className="docket__empty-state-content">
         <div className="docket__empty-state-illustration">
           <img
-            src="/images/docket-empty-illustration.svg"
+            src={imageUrl}
             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>
+          <span className="docket__empty-state-text-bold">{labels.bold}</span>
+          <span className="docket__empty-state-text-regular">{labels.regular}</span>
         </p>
       </div>
     </div>

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

@@ -1,6 +1,15 @@
 import React from 'react';
 import Button from '../../atoms/Button/Button';
 
+export type DocketFooterLabelsType = {
+  addNewQuote: string;
+  compare: string;
+  view: string;
+  save: string;
+  bookNow: string;
+  done: string;
+};
+
 export interface DocketFooterProps {
   /**
    * Handler for "Add new quote" button click
@@ -36,6 +45,26 @@ export interface DocketFooterProps {
    * Additional CSS classes
    */
   className?: string;
+
+  /**
+   * Button done mode - replaces the "Book now" button with a "Done" button
+   */
+  doneButtonMode?: boolean;
+
+  /**
+   * Handler for the "Done" button click
+   */
+  onDoneClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Disable the "Add new quote" button
+   */
+  disableAddNewQuoteButton?: boolean;
+
+  /**
+   * Labels for the buttons
+   */
+  labels?: DocketFooterLabelsType;
 }
 
 /**
@@ -49,19 +78,34 @@ export const DocketFooter: React.FC<DocketFooterProps> = ({
   onSaveClick,
   onBookNowClick,
   className = '',
+  doneButtonMode = false,
+  onDoneClick,
+  disableAddNewQuoteButton = false,
+  labels = {
+    addNewQuote: 'Add new quote',
+    compare: 'Compare',
+    view: 'View',
+    save: 'Save',
+    bookNow: 'Book now',
+    done: 'Done',
+  },
 }) => {
+  const isDoneMode = doneButtonMode && onDoneClick;
+
   return (
     <div className={`docket__footer ${className}`}>
-      {(onAddNewQuoteClick || onCompareClick) && (
+      {!isDoneMode && (onAddNewQuoteClick || onCompareClick) && (
         <div className="docket__footer-top-buttons">
           {onAddNewQuoteClick && (
             <Button
               variant="outline-secondary"
               size="sm"
-              leadingIcon="plus"
+              leadingIcon={disableAddNewQuoteButton ? undefined : 'plus'}
+              trailingIcon={disableAddNewQuoteButton ? 'info' : undefined}
+              disabled={disableAddNewQuoteButton}
               onClick={onAddNewQuoteClick}
               className={`docket__footer-button ${!showCompareButton ? 'docket__footer-button--full' : ''}`}>
-              Add new quote
+              {labels.addNewQuote}
             </Button>
           )}
           {showCompareButton && onCompareClick && (
@@ -71,38 +115,50 @@ export const DocketFooter: React.FC<DocketFooterProps> = ({
               onClick={onCompareClick}
               leadingIcon="document"
               className="docket__footer-button">
-              Compare
+              {labels.compare}
             </Button>
           )}
         </div>
       )}
       <div className="docket__footer-actions">
-        {onViewClick && (
-          <Button
-            variant="outline-secondary"
-            size="sm"
-            onClick={onViewClick}
-            className="docket__footer-view-link">
-            <span className="docket__footer-view-text">View</span>
-          </Button>
-        )}
-        {onSaveClick && (
-          <Button
-            variant="outline-secondary"
-            size="sm"
-            onClick={onSaveClick}
-            className="docket__footer-button">
-            Save
-          </Button>
-        )}
-        {onBookNowClick && (
+        {isDoneMode ? (
           <Button
             variant="secondary"
             size="sm"
-            onClick={onBookNowClick}
-            className="docket__footer-button docket__footer-button--primary">
-            Book now
+            onClick={onDoneClick}
+            className="docket__footer-button docket__footer-button--primary docket__footer-button--half">
+            {labels.done}
           </Button>
+        ) : (
+          <>
+            {onViewClick && (
+              <Button
+                variant="outline-secondary"
+                size="sm"
+                onClick={onViewClick}
+                className="docket__footer-button">
+                <span className="docket__footer-view-text">{labels.view}</span>
+              </Button>
+            )}
+            {onSaveClick && (
+              <Button
+                variant="outline-secondary"
+                size="sm"
+                onClick={onSaveClick}
+                className="docket__footer-button">
+                {labels.save}
+              </Button>
+            )}
+            {onBookNowClick && (
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={onBookNowClick}
+                className="docket__footer-button docket__footer-button--primary">
+                {labels.bookNow}
+              </Button>
+            )}
+          </>
         )}
       </div>
     </div>

package/src/components/organisms/DocketAccordion/DocketAccordion.tsx

@@ -18,7 +18,7 @@ import DocketPrices from '../../molecules/DocketPrices';
 import { ExcursionDocket } from '../../molecules/ExcursionDocket/ExcursionDocket';
 import { OtherServiceDocket } from '../../molecules/OtherServiceDocket/OtherServiceDocket';
 import { TransferDocket } from '../../molecules/TransferDocket/TransferDocket';
-import { DocketEmptyState } from '../Docket/Docket';
+import { DocketEmptyState, type DocketEmptyStateLabelsType } from '../Docket/Docket';
 
 export interface DocketAccordionProps {
   proposal: ProposalSorted;
@@ -29,6 +29,14 @@ export interface DocketAccordionProps {
   expanded?: boolean;
   onExpandedChange?: (expanded: boolean) => void;
   moreOptions?: ActionDropdownItem[];
+  /**
+   * URL of the empty state illustration image (when the proposal has no services)
+   */
+  emptyStateImageUrl?: string;
+  /**
+   * Labels for the empty state (bold and regular text) when the proposal has no services
+   */
+  emptyStateLabels?: DocketEmptyStateLabelsType;
 }
 
 /**
@@ -52,6 +60,8 @@ export default function DocketAccordion({
   onExpandedChange,
   moreOptions = [],
   manageQuotationLabel = 'Manage quotation',
+  emptyStateImageUrl,
+  emptyStateLabels,
 }: DocketAccordionProps) {
   const allServices = proposal.Services || [];
 
@@ -157,7 +167,7 @@ export default function DocketAccordion({
       footer={allServices?.length > 0 ? renderAccordionFooter : undefined}>
       <div className="docket-accordion__content">
         {allServices.length === 0 ? (
-          <DocketEmptyState />
+          <DocketEmptyState imageUrl={emptyStateImageUrl} labels={emptyStateLabels} />
         ) : (
           <div className="docket-accordion__services">
             {allServices.map((service, index) => renderService(service, index))}