mautourco-components 0.2.51 → 0.2.53

package/dist/components/molecules/ActionDropdown/ActionDropdown.css

@@ -39,6 +39,7 @@
   display: flex;
   height: 2rem;
   width: 2rem;
+  cursor: pointer;
   align-items: center;
   justify-content: center;
   border-radius: var(--border-radius-rounded-lg);

package/dist/components/molecules/ActionDropdown/ActionDropdown.js

@@ -17,7 +17,8 @@ import './ActionDropdown.css';
 export function ActionDropdown(props) {
     var data = props.data, children = props.children, _a = props.maxWidth, maxWidth = _a === void 0 ? '153px' : _a;
     var _b = useState(false), open = _b[0], setOpen = _b[1];
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: children !== null && children !== void 0 ? children : (_jsx("button", { className: "action-dropdown-trigger", children: _jsx(Icon, { name: "more-vertical" }) })) }), _jsx(PopoverContent, { className: "action-dropdown", style: { '--max-width': maxWidth }, align: "end", side: "bottom", avoidCollisions: false, children: data.map(function (item, index) {
+    console.log(open);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { children: children !== null && children !== void 0 ? children : (_jsx("span", { className: "action-dropdown-trigger", children: _jsx(Icon, { name: "more-vertical" }) })) }), _jsx(PopoverContent, { className: "action-dropdown", style: { '--max-width': maxWidth }, align: "end", side: "bottom", avoidCollisions: false, children: data.map(function (item, index) {
                     var defaultButton = (_jsx("button", { onClick: function () {
                             var _a;
                             if (item.disabled) {

package/dist/components/molecules/DateDisplay/DateDisplay.js

@@ -18,7 +18,7 @@ export function DateDisplay(props) {
     var _a = props.dates, dates = _a === void 0 ? [] : _a, _b = props.arrowSize, arrowSize = _b === void 0 ? 'sm' : _b, _c = props.calendarSize, calendarSize = _c === void 0 ? 'sm' : _c, _d = props.textSize, textSize = _d === void 0 ? 'sm' : _d, _e = props.colorMode, colorMode = _e === void 0 ? 'black' : _e, _f = props.className, className = _f === void 0 ? '' : _f;
     var formattedDates = useMemo(function () {
         return dates.map(function (d) {
-            var dateObj = typeof d === 'string' ? new Date(d) : d;
+            var dateObj = new Date(d);
             // Check if the date is valid then format it to dd/MM/yyyy format
             if (isValid(dateObj)) {
                 return format(dateObj, 'dd/MM/yyyy');

package/dist/components/molecules/DetailsInfo/DetailsAction.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../../lib/utils';
 import { ActionDropdownType } from '../../../types/table/index';
-import Button from '../../atoms/Button/Button';
+import Icon from '../../atoms/Icon/Icon';
 import { ActionDropdown } from '../ActionDropdown/ActionDropdown';
 export function DetailsAction(props) {
-    var _a = props.data, data = _a === void 0 ? [] : _a, onAction = props.onAction, _b = props.buttonVariant, buttonVariant = _b === void 0 ? 'outline-secondary' : _b, _c = props.buttonClassName, buttonClassName = _c === void 0 ? '' : _c, _d = props.buttonLabel, buttonLabel = _d === void 0 ? 'More options' : _d, dropdownMaxWidth = props.dropdownMaxWidth;
+    var data = props.data, onAction = props.onAction, _a = props.buttonVariant, buttonVariant = _a === void 0 ? 'outline-secondary' : _a, _b = props.buttonClassName, buttonClassName = _b === void 0 ? '' : _b, _c = props.buttonLabel, buttonLabel = _c === void 0 ? 'More options' : _c, dropdownMaxWidth = props.dropdownMaxWidth;
     return (_jsx(ActionDropdown, { maxWidth: dropdownMaxWidth, data: data
             ? data
             : [
@@ -32,5 +32,5 @@ export function DetailsAction(props) {
                         onAction === null || onAction === void 0 ? void 0 : onAction(ActionDropdownType.DELETE_QUOTE);
                     },
                 },
-            ], children: _jsx(Button, { variant: buttonVariant, trailingIcon: "chevron-down", size: "sm", className: cn('w-[144px] !justify-between !px-[14px]', buttonClassName), children: buttonLabel }) }));
+            ], children: _jsxs("div", { className: cn('button button--outline-secondary button--sm w-[144px] !justify-between !px-[14px] cursor-pointer', buttonClassName), children: [buttonLabel, _jsx("span", { className: "button__icon button__icon--trailing", children: _jsx(Icon, { name: "chevron-down" }) })] }) }));
 }

package/dist/components/molecules/DetailsInfo/DetailsAgency/DetailsAgency.d.ts

@@ -4,10 +4,12 @@ export interface DetailsAgencyProps {
     /** Name of the agency */
     name: string;
     /** Client type of the agency */
-    clientType: string;
+    clientType?: string;
     /** Show the waiting for confirmation chip */
     isOnRequest: boolean;
     /** Children of the agency */
     children?: React.ReactNode;
+    /** The logo of the agency */
+    logo?: string;
 }
 export declare function DetailsAgency(props: DetailsAgencyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/DetailsInfo/DetailsAgency/DetailsAgency.js

@@ -3,6 +3,6 @@ import Chip from '../../../atoms/Chip/Chip';
 import { Text } from '../../../atoms/Typography/Typography';
 import './DetailsAgency.css';
 export function DetailsAgency(props) {
-    var name = props.name, clientType = props.clientType, isOnRequest = props.isOnRequest, children = props.children;
-    return (_jsxs("div", { className: "flex flex-col gap-y-6 items-end", children: [_jsx("img", { src: "/images/mautourco-logo.png", alt: "Mautourco Logo", width: 220 }), _jsxs("div", { className: "details-agency", children: [_jsx(Text, { variant: "bold", color: "accent", children: "Documents details:" }), _jsxs("div", { className: "details-agency__content", children: [_jsxs("div", { className: "details-agency__content-item", children: [_jsx(Text, { variant: "bold", size: "sm", leading: "4", className: "details-agency__content-item-name", children: "Agency" }), _jsx(Text, { size: "sm", leading: "4", children: name })] }), ' ', _jsxs("div", { className: "details-agency__content-item", children: [_jsx(Text, { variant: "bold", size: "sm", leading: "4", className: "details-agency__content-item-name", children: "Client type" }), _jsx(Text, { size: "sm", leading: "4", children: clientType })] })] })] }), isOnRequest && _jsx(Chip, { color: "yellow", children: "Waiting for confirmation" }), children] }));
+    var name = props.name, clientType = props.clientType, isOnRequest = props.isOnRequest, children = props.children, _a = props.logo, logo = _a === void 0 ? '/images/mautourco-logo.png' : _a;
+    return (_jsxs("div", { className: "flex flex-col gap-y-6 items-end", children: [_jsx("img", { src: logo, alt: "Mautourco Logo", width: 220 }), _jsxs("div", { className: "details-agency", children: [_jsx(Text, { variant: "bold", color: "accent", children: "Documents details:" }), _jsxs("div", { className: "details-agency__content", children: [_jsxs("div", { className: "details-agency__content-item", children: [_jsx(Text, { variant: "bold", size: "sm", leading: "4", className: "details-agency__content-item-name", children: "Agency" }), _jsx(Text, { size: "sm", leading: "4", children: name })] }), ' ', clientType && (_jsxs("div", { className: "details-agency__content-item", children: [_jsx(Text, { variant: "bold", size: "sm", leading: "4", className: "details-agency__content-item-name", children: "Client type" }), _jsx(Text, { size: "sm", leading: "4", children: clientType })] }))] })] }), isOnRequest && _jsx(Chip, { color: "yellow", children: "Waiting for confirmation" }), children] }));
 }

package/dist/components/molecules/DetailsInfo/DetailsClient/DetailsClient.css

@@ -27,4 +27,10 @@
       background-size: cover;
     }
   }
+}
+
+.details-client__item > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }

package/dist/components/molecules/DetailsInfo/DetailsClient/DetailsClient.js

@@ -5,5 +5,5 @@ import { languagesMap } from '../../ServiceLanguages/constant';
 import './DetailsClient.css';
 export function DetailsClientInfo(props) {
     var language = props.language, clients = props.clients;
-    return (_jsxs("div", { className: "details-client", children: [_jsx(Text, { variant: "bold", children: "1. Client's information" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Text, { variant: "medium", size: "lg", children: "Language:" }), _jsxs(Chip, { color: "neutral", size: "md", className: "!px-4", children: [_jsx("i", { className: "fi fi-".concat(languagesMap[language.toLowerCase()]) }), _jsx(Text, { variant: "medium", as: "span", children: language })] })] }), _jsx("div", { className: "flex gap-x-8 flex-wrap", children: clients.map(function (client, index) { return (_jsxs("div", { className: "space-y-4", children: [_jsxs(Text, { variant: "medium", size: "lg", children: [client.type, " No ", index + 1, ' ', client.age > 0 ? (_jsxs(Text, { variant: "regular", size: "lg", as: "span", children: ["(", client.age, " yo)"] })) : ('')] }), _jsxs(Chip, { color: "neutral", size: "md", className: "!px-4", children: [client.firstName, " ", client.lastName] })] }, "cl-".concat(index))); }) })] }));
+    return (_jsxs("div", { className: "details-client", children: [_jsx(Text, { variant: "bold", children: "1. Client's information" }), _jsxs("div", { className: "details-client__item", children: [_jsx(Text, { variant: "medium", size: "lg", children: "Language:" }), _jsxs(Chip, { color: "neutral", size: "md", className: "!px-4", children: [_jsx("i", { className: "fi fi-".concat(languagesMap[language.toLowerCase()]) }), _jsx(Text, { variant: "medium", as: "span", children: language })] })] }), _jsx("div", { className: "flex gap-x-8 flex-wrap", children: clients.map(function (client, index) { return (_jsxs("div", { className: "details-client__item", children: [_jsxs(Text, { variant: "medium", size: "lg", children: [client.type, " No ", index + 1, ' ', client.age > 0 ? (_jsxs(Text, { variant: "regular", size: "lg", as: "span", children: ["(", client.age, " yo)"] })) : ('')] }), _jsxs(Chip, { color: "neutral", size: "md", className: "!px-4", children: [client.firstName, " ", client.lastName] })] }, "cl-".concat(index))); }) })] }));
 }

package/dist/components/organisms/TabCancellationPolicy/CancellationAccom.d.ts

@@ -1,6 +1,6 @@
 import { HeaderAccomProps } from './HeaderAccom';
 import { Policy } from './PolicyAccom/PolicyAccom';
-export interface CancellationAccomProps extends HeaderAccomProps {
+export interface CancellationAccomProps extends Omit<HeaderAccomProps, 'dates'> {
     /**
      * The image of the cancellation accommodation.
      */
@@ -13,6 +13,7 @@ export interface CancellationAccomProps extends HeaderAccomProps {
      * The room policies of the cancellation accommodation.
      */
     roomPolicies: Array<{
+        dates: string[];
         roomName: string;
         policies: Policy[];
     }>;

package/dist/components/organisms/TabCancellationPolicy/CancellationAccom.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import CancellationBody from './CancellationBody';
 import CancellationHeader from './CancellationHeader';
 import DetailsCancellationPolicy from './TabCancellationPolicy';
@@ -19,6 +20,6 @@ import DetailsCancellationPolicy from './TabCancellationPolicy';
  * @returns The CancellationAccom component.
  */
 export default function CancellationAccom(props) {
-    var hotelName = props.hotelName, pax = props.pax, dates = props.dates, image = props.image, roomPolicies = props.roomPolicies, isOnRequest = props.isOnRequest;
-    return (_jsx(DetailsCancellationPolicy.Layout, { title: "Accommodation", icon: "accom", isOnRequest: isOnRequest, image: image, header: _jsx(CancellationHeader, { children: _jsx(CancellationHeader.Accom, { hotelName: hotelName, pax: pax, dates: dates }) }), children: _jsx(CancellationBody, { children: roomPolicies.map(function (roomPolicy, index) { return (_jsx(CancellationBody.Accom, { roomName: roomPolicy.roomName, policies: roomPolicy.policies }, index)); }) }) }));
+    var hotelName = props.hotelName, pax = props.pax, image = props.image, roomPolicies = props.roomPolicies, isOnRequest = props.isOnRequest;
+    return (_jsx(DetailsCancellationPolicy.Layout, { title: "Accommodation", icon: "accom", isOnRequest: isOnRequest, image: image, children: _jsx(CancellationBody, { children: roomPolicies.map(function (roomPolicy, index) { return (_jsxs(Fragment, { children: [_jsx("div", { className: "details-cancellation-policy__layout-content-header", children: _jsx(CancellationHeader, { children: _jsx(CancellationHeader.Accom, { hotelName: hotelName, pax: pax, dates: roomPolicy.dates }) }) }), _jsx(CancellationBody.Accom, { index: index, roomName: roomPolicy.roomName, policies: roomPolicy.policies }, index)] }, index)); }) }) }));
 }

package/dist/components/organisms/TabCancellationPolicy/PolicyAccom/PolicyAccom.css

@@ -9,6 +9,7 @@
 }
 
 .policy-accom {
+  padding-top: 1.5rem;
   .chip__label {
     column-gap: 1rem;
   }

package/dist/components/organisms/TabCancellationPolicy/TabCancellationPolicyLayout/TabCancellationPolicyLayout.css

@@ -24,6 +24,8 @@
     }
   }
   img {
+    width: 100%;
+    height: 100%;
     object-fit: cover;
   }
 }

package/dist/components/organisms/TabCancellationPolicy/TabCancellationPolicyLayout/TabCancellationPolicyLayout.d.ts

@@ -7,7 +7,7 @@ interface TabCancellationPolicyLayoutProps {
     isOnRequest?: boolean;
     children: React.ReactNode;
     image: string;
-    header: React.ReactNode;
+    header?: React.ReactNode;
 }
 export default function TabCancellationPolicyLayout(props: TabCancellationPolicyLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/organisms/TabCancellationPolicy/TabCancellationPolicyLayout/TabCancellationPolicyLayout.js

@@ -4,5 +4,5 @@ import TextWithIcon from '../../../molecules/TextWithIcon/TextWithIcon';
 import './TabCancellationPolicyLayout.css';
 export default function TabCancellationPolicyLayout(props) {
     var title = props.title, icon = props.icon, isOnRequest = props.isOnRequest, children = props.children, image = props.image, header = props.header;
-    return (_jsxs("div", { className: "details-cancellation-policy__layout", children: [_jsxs(TextWithIcon, { icon: icon, color: isOnRequest ? 'yellow' : 'accent', textVariant: "bold", children: [title, isOnRequest && _jsx(Chip, { color: "yellow", children: "On request" })] }), _jsxs("div", { className: "details-cancellation-policy__layout-flex", children: [_jsx("figure", { children: _jsx("img", { src: image, alt: title, width: 400, height: 400 }) }), _jsxs("div", { className: "details-cancellation-policy__layout-content", children: [_jsx("div", { className: "details-cancellation-policy__layout-content-header", children: header }), _jsx("div", { className: "details-cancellation-policy__layout-content-body", children: children })] })] })] }));
+    return (_jsxs("div", { className: "details-cancellation-policy__layout", children: [_jsxs(TextWithIcon, { icon: icon, color: isOnRequest ? 'yellow' : 'accent', textVariant: "bold", children: [title, isOnRequest && _jsx(Chip, { color: "yellow", children: "On request" })] }), _jsxs("div", { className: "details-cancellation-policy__layout-flex", children: [_jsx("figure", { children: _jsx("img", { src: image, alt: title, width: 400, height: 400 }) }), _jsxs("div", { className: "details-cancellation-policy__layout-content", children: [header && (_jsx("div", { className: "details-cancellation-policy__layout-content-header", children: header })), _jsx("div", { className: "details-cancellation-policy__layout-content-body", children: children })] })] })] }));
 }

package/dist/components/organisms/Table/Table.css

@@ -20,7 +20,9 @@
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
-  table-layout: fixed;
+  &.table-layout-fixed {
+    table-layout: fixed;
+  }
   th,
   td {
     padding-inline: var(--spacing-padding-px-4);

package/dist/components/organisms/Table/Table.d.ts

@@ -35,6 +35,8 @@ export interface TableProps<T extends TableRowData<T>> {
     isTotalBorderDash?: boolean;
     /** Whether the last column is visible */
     totalSubstractedSpace?: number;
+    /** Whether the table layout is fixed */
+    isLayoutFixed?: boolean;
 }
 /**
  * A table component for displaying structured data in rows and columns. Supports customizable column definitions and data rows.

package/dist/components/organisms/Table/Table.js

@@ -66,7 +66,7 @@ var NestedContent = function (_a) {
  *
  */
 export function Table(props) {
-    var columns = props.columns, data = props.data, pagination = props.pagination, isGrouped = props.isGrouped, _a = props.totalRows, totalRows = _a === void 0 ? {} : _a, _b = props.isTotalBorderDash, isTotalBorderDash = _b === void 0 ? true : _b, _c = props.totalSubstractedSpace, totalSubstractedSpace = _c === void 0 ? 10 : _c, onClickRow = props.onClickRow;
+    var columns = props.columns, data = props.data, pagination = props.pagination, isGrouped = props.isGrouped, _a = props.totalRows, totalRows = _a === void 0 ? {} : _a, _b = props.isTotalBorderDash, isTotalBorderDash = _b === void 0 ? true : _b, _c = props.totalSubstractedSpace, totalSubstractedSpace = _c === void 0 ? 10 : _c, _d = props.isLayoutFixed, isLayoutFixed = _d === void 0 ? true : _d, onClickRow = props.onClickRow;
     var normalizeLastColumnWidth = function () {
         var width = columns[columns.length - 1].width;
         if (typeof width === 'number') {
@@ -75,7 +75,7 @@ export function Table(props) {
         return width;
     };
     var hasTotal = Object.keys(totalRows).length > 0;
-    return (_jsx(LazyMotion, { features: domAnimation, children: _jsxs("div", { children: [_jsx("div", { className: cn('table-container', { 'table-container--no-total': !hasTotal }), children: _jsxs("table", { className: "table", children: [_jsx("thead", { className: "table__header", children: _jsx("tr", { children: columns.map(function (column, columnIndex) { return (_jsx("th", { className: column.className, style: column.width
+    return (_jsx(LazyMotion, { features: domAnimation, children: _jsxs("div", { children: [_jsx("div", { className: cn('table-container', { 'table-container--no-total': !hasTotal }), children: _jsxs("table", { className: cn('table', { 'table-layout-fixed': isLayoutFixed }), children: [_jsx("thead", { className: "table__header", children: _jsx("tr", { children: columns.map(function (column, columnIndex) { return (_jsx("th", { className: column.className, style: column.width
                                             ? { minWidth: column.width, width: column.width }
                                             : undefined, children: _jsx(Text, { variant: "bold", size: "sm", children: column.header }) }, "hd-".concat(columnIndex))); }) }) }), _jsxs("tbody", { className: "table__body", children: [data.length > 0 &&
                                         data.map(function (row, rowIndex) {

package/dist/components/ui/tooltip.js

@@ -25,7 +25,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cn } from '../../lib/utils';
 function TooltipProvider(_a) {
     var _b = _a.delayDuration, delayDuration = _b === void 0 ? 0 : _b, props = __rest(_a, ["delayDuration"]);
-    return _jsx(TooltipPrimitive.Provider, __assign({ "data-slot": "tooltip-provider", delayDuration: delayDuration }, props));
+    return (_jsx(TooltipPrimitive.Provider, __assign({ "data-slot": "tooltip-provider", delayDuration: delayDuration }, props)));
 }
 function Tooltip(_a) {
     var props = __rest(_a, []);
@@ -37,6 +37,6 @@ function TooltipTrigger(_a) {
 }
 function TooltipContent(_a) {
     var className = _a.className, _b = _a.sideOffset, sideOffset = _b === void 0 ? 0 : _b, children = _a.children, props = __rest(_a, ["className", "sideOffset", "children"]);
-    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, __assign({ "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn('bg-foreground bg-[var(--tooltip-color-background-default)] text-white animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance', className) }, props, { children: [children, _jsx(TooltipPrimitive.Arrow, { className: "bg-[var(--tooltip-color-background-default)] fill-[var(--tooltip-color-background-default)] z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })] })) }));
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, __assign({ "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn('bg-[var(--tooltip-color-background-default)] text-white animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance', className) }, props, { children: [children, _jsx(TooltipPrimitive.Arrow, { className: "bg-[var(--tooltip-color-background-default)] fill-[var(--tooltip-color-background-default)] z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })] })) }));
 }
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.51",
+  "version": "0.2.53",
   "private": false,
   "description": "Bibliothèque de composants Mautourco pour le redesign",
   "main": "dist/index.js",

package/src/components/molecules/ActionDropdown/ActionDropdown.css

@@ -17,7 +17,7 @@
 }
 
 .action-dropdown-trigger {
-  @apply w-8 h-8 flex items-center justify-center;
+  @apply w-8 h-8 flex items-center justify-center cursor-pointer;
   border-radius: var(--border-radius-rounded-lg);
   background-color: var(--color-neutral-100);
 }

package/src/components/molecules/ActionDropdown/ActionDropdown.tsx

@@ -38,13 +38,15 @@ export function ActionDropdown(props: ActionDropdownProps) {
   const { data, children, maxWidth = '153px' } = props;
   const [open, setOpen] = useState(false);
 
+  console.log(open);
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
+      <PopoverTrigger>
         {children ?? (
-          <button className="action-dropdown-trigger">
+          <span className="action-dropdown-trigger">
             <Icon name="more-vertical" />
-          </button>
+          </span>
         )}
       </PopoverTrigger>
       <PopoverContent

package/src/components/molecules/DateDisplay/DateDisplay.tsx

@@ -46,7 +46,7 @@ export function DateDisplay(props: DateDisplayProps) {
   } = props;
   const formattedDates = useMemo(() => {
     return dates.map((d) => {
-      const dateObj = typeof d === 'string' ? new Date(d) : d;
+      const dateObj = new Date(d);
       // Check if the date is valid then format it to dd/MM/yyyy format
       if (isValid(dateObj)) {
         return format(dateObj, 'dd/MM/yyyy');

package/src/components/molecules/DetailsInfo/DetailsAction.tsx

@@ -1,6 +1,7 @@
 import { cn } from '@/src/lib/utils';
 import { ActionDropdownType } from '@/src/types/table';
-import Button, { ButtonProps } from '../../atoms/Button/Button';
+import { ButtonProps } from '../../atoms/Button/Button';
+import Icon from '../../atoms/Icon/Icon';
 import { ActionDropdown, ActionDropdownItem } from '../ActionDropdown/ActionDropdown';
 
 export interface DetailsActionProps {
@@ -15,7 +16,7 @@ export interface DetailsActionProps {
 
 export function DetailsAction(props: DetailsActionProps) {
   const {
-    data = [],
+    data,
     onAction,
     buttonVariant = 'outline-secondary',
     buttonClassName = '',
@@ -55,13 +56,16 @@ export function DetailsAction(props: DetailsActionProps) {
               },
             ]
       }>
-      <Button
-        variant={buttonVariant}
-        trailingIcon="chevron-down"
-        size="sm"
-        className={cn('w-[144px] !justify-between !px-[14px]', buttonClassName)}>
+      <div
+        className={cn(
+          'button button--outline-secondary button--sm w-[144px] !justify-between !px-[14px] cursor-pointer',
+          buttonClassName
+        )}>
         {buttonLabel}
-      </Button>
+        <span className="button__icon button__icon--trailing">
+          <Icon name="chevron-down" />
+        </span>
+      </div>
     </ActionDropdown>
   );
 }

package/src/components/molecules/DetailsInfo/DetailsAgency/DetailsAgency.tsx

@@ -7,18 +7,27 @@ export interface DetailsAgencyProps {
   /** Name of the agency */
   name: string;
   /** Client type of the agency */
-  clientType: string;
+  clientType?: string;
   /** Show the waiting for confirmation chip */
   isOnRequest: boolean;
   /** Children of the agency */
   children?: React.ReactNode;
+
+  /** The logo of the agency */
+  logo?: string;
 }
 
 export function DetailsAgency(props: DetailsAgencyProps) {
-  const { name, clientType, isOnRequest, children } = props;
+  const {
+    name,
+    clientType,
+    isOnRequest,
+    children,
+    logo = '/images/mautourco-logo.png',
+  } = props;
   return (
     <div className="flex flex-col gap-y-6 items-end">
-      <img src="/images/mautourco-logo.png" alt="Mautourco Logo" width={220} />
+      <img src={logo} alt="Mautourco Logo" width={220} />
       <div className="details-agency">
         <Text variant="bold" color="accent">
           Documents details:
@@ -36,18 +45,20 @@ export function DetailsAgency(props: DetailsAgencyProps) {
               {name}
             </Text>
           </div>{' '}
-          <div className="details-agency__content-item">
-            <Text
-              variant="bold"
-              size="sm"
-              leading="4"
-              className="details-agency__content-item-name">
-              Client type
-            </Text>
-            <Text size="sm" leading="4">
-              {clientType}
-            </Text>
-          </div>
+          {clientType && (
+            <div className="details-agency__content-item">
+              <Text
+                variant="bold"
+                size="sm"
+                leading="4"
+                className="details-agency__content-item-name">
+                Client type
+              </Text>
+              <Text size="sm" leading="4">
+                {clientType}
+              </Text>
+            </div>
+          )}
         </div>
       </div>
       {isOnRequest && <Chip color="yellow">Waiting for confirmation</Chip>}

package/src/components/molecules/DetailsInfo/DetailsClient/DetailsClient.css

@@ -8,3 +8,7 @@
     }
   }
 }
+
+.details-client__item {
+  @apply space-y-4;
+}

package/src/components/molecules/DetailsInfo/DetailsClient/DetailsClient.tsx

@@ -20,7 +20,7 @@ export function DetailsClientInfo(props: DetailsClientInfoProps) {
   return (
     <div className="details-client">
       <Text variant="bold">1. Client's information</Text>
-      <div className="space-y-4">
+      <div className="details-client__item">
         <Text variant="medium" size="lg">
           Language:
         </Text>
@@ -33,7 +33,7 @@ export function DetailsClientInfo(props: DetailsClientInfoProps) {
       </div>
       <div className="flex gap-x-8 flex-wrap">
         {clients.map((client, index) => (
-          <div key={`cl-${index}`} className="space-y-4">
+          <div key={`cl-${index}`} className="details-client__item">
             <Text variant="medium" size="lg">
               {client.type} No {index + 1}{' '}
               {client.age > 0 ? (

package/src/components/organisms/TabCancellationPolicy/CancellationAccom.tsx

@@ -1,10 +1,11 @@
+import { Fragment } from 'react';
 import CancellationBody from './CancellationBody';
 import CancellationHeader from './CancellationHeader';
 import { HeaderAccomProps } from './HeaderAccom';
 import { Policy } from './PolicyAccom/PolicyAccom';
 import DetailsCancellationPolicy from './TabCancellationPolicy';
 
-export interface CancellationAccomProps extends HeaderAccomProps {
+export interface CancellationAccomProps extends Omit<HeaderAccomProps, 'dates'> {
   /**
    * The image of the cancellation accommodation.
    */
@@ -17,6 +18,7 @@ export interface CancellationAccomProps extends HeaderAccomProps {
    * The room policies of the cancellation accommodation.
    */
   roomPolicies: Array<{
+    dates: string[];
     roomName: string;
     policies: Policy[];
   }>;
@@ -39,25 +41,32 @@ export interface CancellationAccomProps extends HeaderAccomProps {
  * @returns The CancellationAccom component.
  */
 export default function CancellationAccom(props: CancellationAccomProps) {
-  const { hotelName, pax, dates, image, roomPolicies, isOnRequest } = props;
+  const { hotelName, pax, image, roomPolicies, isOnRequest } = props;
   return (
     <DetailsCancellationPolicy.Layout
       title="Accommodation"
       icon="accom"
       isOnRequest={isOnRequest}
-      image={image}
-      header={
-        <CancellationHeader>
-          <CancellationHeader.Accom hotelName={hotelName} pax={pax} dates={dates} />
-        </CancellationHeader>
-      }>
+      image={image}>
       <CancellationBody>
         {roomPolicies.map((roomPolicy, index) => (
-          <CancellationBody.Accom
-            key={index}
-            roomName={roomPolicy.roomName}
-            policies={roomPolicy.policies}
-          />
+          <Fragment key={index}>
+            <div className="details-cancellation-policy__layout-content-header">
+              <CancellationHeader>
+                <CancellationHeader.Accom
+                  hotelName={hotelName}
+                  pax={pax}
+                  dates={roomPolicy.dates}
+                />
+              </CancellationHeader>
+            </div>
+            <CancellationBody.Accom
+              key={index}
+              index={index}
+              roomName={roomPolicy.roomName}
+              policies={roomPolicy.policies}
+            />
+          </Fragment>
         ))}
       </CancellationBody>
     </DetailsCancellationPolicy.Layout>

package/src/components/organisms/TabCancellationPolicy/PolicyAccom/PolicyAccom.css

@@ -1,5 +1,5 @@
 .policy-accom {
-  @apply space-y-6;
+  @apply space-y-6 pt-6;
   .chip__label {
     @apply gap-x-4;
   }

package/src/components/organisms/TabCancellationPolicy/TabCancellationPolicyLayout/TabCancellationPolicyLayout.css

@@ -16,6 +16,8 @@
     }
   }
   img {
+    width: 100%;
+    height: 100%;
     object-fit: cover;
   }
 }

package/src/components/organisms/TabCancellationPolicy/TabCancellationPolicyLayout/TabCancellationPolicyLayout.tsx

@@ -10,7 +10,7 @@ interface TabCancellationPolicyLayoutProps {
   isOnRequest?: boolean;
   children: React.ReactNode;
   image: string;
-  header: React.ReactNode;
+  header?: React.ReactNode;
 }
 
 export default function TabCancellationPolicyLayout(
@@ -31,9 +31,11 @@ export default function TabCancellationPolicyLayout(
           <img src={image} alt={title} width={400} height={400} />
         </figure>
         <div className="details-cancellation-policy__layout-content">
-          <div className="details-cancellation-policy__layout-content-header">
-            {header}
-          </div>
+          {header && (
+            <div className="details-cancellation-policy__layout-content-header">
+              {header}
+            </div>
+          )}
           <div className="details-cancellation-policy__layout-content-body">
             {children}
           </div>

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

@@ -16,7 +16,9 @@
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
-  table-layout: fixed;
+  &.table-layout-fixed {
+    table-layout: fixed;
+  }
   th,
   td {
     padding-inline: var(--spacing-padding-px-4);

package/src/components/organisms/Table/Table.tsx

@@ -52,6 +52,9 @@ export interface TableProps<T extends TableRowData<T>> {
 
   /** Whether the last column is visible */
   totalSubstractedSpace?: number;
+
+  /** Whether the table layout is fixed */
+  isLayoutFixed?: boolean;
 }
 
 /**
@@ -150,6 +153,7 @@ export function Table<T extends TableRowData<T>>(props: TableProps<T>) {
     totalRows = {},
     isTotalBorderDash = true,
     totalSubstractedSpace = 10,
+    isLayoutFixed = true,
     onClickRow,
   } = props;
 
@@ -168,7 +172,7 @@ export function Table<T extends TableRowData<T>>(props: TableProps<T>) {
       <div>
         <div
           className={cn('table-container', { 'table-container--no-total': !hasTotal })}>
-          <table className="table">
+          <table className={cn('table', { 'table-layout-fixed': isLayoutFixed })}>
             <thead className="table__header">
               <tr>
                 {columns.map((column, columnIndex) => (

package/src/components/ui/tooltip.tsx

@@ -3,8 +3,17 @@ import * as React from 'react';
 
 import { cn } from '@/src/lib/utils';
 
-function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
 }
 
 function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
@@ -15,7 +24,9 @@ function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root
   );
 }
 
-function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
@@ -31,7 +42,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-foreground bg-[var(--tooltip-color-background-default)] text-white animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          'bg-[var(--tooltip-color-background-default)] text-white animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
           className
         )}
         {...props}>