mautourco-components 0.2.44 → 0.2.45

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

@@ -8,6 +8,6 @@ export interface QuoteHeaderProps {
     /** Callback to create a new quote */
     onNewQuote: () => void;
     onFilterChange?: (filter: FilterType, value: string) => void;
-    currentFilter: Record<FilterType, string>;
+    currentFilter?: Record<FilterType, string>;
 }
 export declare function QuoteHeader(props: QuoteHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/QuoteHeader/QuoteHeader.js

@@ -45,10 +45,15 @@ var filterConfig = {
 export function QuoteHeader(props) {
     var _a;
     var _b = props.current, current = _b === void 0 ? 'quotation' : _b, currentFilter = props.currentFilter, onNavigate = props.onNavigate, onNewQuote = props.onNewQuote, onFilterChange = props.onFilterChange;
-    var _c = useState(currentFilter !== null && currentFilter !== void 0 ? currentFilter : {}), currentValue = _c[0], setCurrentValue = _c[1];
+    var _c = useState(currentFilter || {
+        date: '',
+        clientType: '',
+        fileStatus: '',
+        search: '',
+    }), currentValue = _c[0], setCurrentValue = _c[1];
     var _d = useState((_a = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.search) !== null && _a !== void 0 ? _a : ''), searchValue = _d[0], setSearchValue = _d[1];
     useEffect(function () {
-        if (Object.keys(currentFilter !== null && currentFilter !== void 0 ? currentFilter : {}).length > 0) {
+        if (currentFilter && Object.keys(currentFilter).length > 0) {
             var search = currentFilter.search, rest = __rest(currentFilter, ["search"]);
             setCurrentValue(rest);
             setSearchValue(search);

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

@@ -11,6 +11,11 @@
   }
 }
 
+.text--highlight {
+  background-color: var(--color-amber-100);
+  font-weight: 700;
+}
+
 .table {
   width: 100%;
   border-collapse: collapse;

package/dist/components/organisms/Table/columns/booking-columns.d.ts

@@ -2,6 +2,6 @@ import { ActionDropdownType } from '@/src/types/table';
 import { BookingListItem } from '@/src/types/table/booking.types';
 import { ColumnType } from '../TableCell';
 export declare const bookingColumns: (params: {
-    onExpand: (value?: BookingListItem) => void;
-    onAction: (action: ActionDropdownType) => void;
+    onAction?: (action: ActionDropdownType) => void;
+    keywords?: string;
 }) => ColumnType<BookingListItem>[];

package/dist/components/organisms/Table/columns/booking-columns.js

@@ -6,19 +6,39 @@ import { DateDisplay } from '../../../molecules/DateDisplay/DateDisplay';
 import { PaxChips } from '../../../molecules/PaxChips/PaxChips';
 import { actionDropdownData } from '../constant';
 export var bookingColumns = function (_a) {
-    var onExpand = _a.onExpand, onAction = _a.onAction;
+    var onAction = _a.onAction, _b = _a.keywords, keywords = _b === void 0 ? '' : _b;
     return [
         {
             header: 'Quote nb.',
             key: 'booking_id',
             width: 150,
-            cell: function (value) { return (_jsx(Text, { variant: "medium", size: "sm", children: value })); },
+            cell: function (value) {
+                if (value === void 0) { value = ''; }
+                var currentValue = String(value);
+                var regex = new RegExp("(".concat(keywords !== null && keywords !== void 0 ? keywords : '', ")"), 'gi');
+                if (regex.test(currentValue)) {
+                    return (_jsx(Text, { variant: "medium", size: "sm", children: _jsx("span", { dangerouslySetInnerHTML: {
+                                __html: currentValue.replace(regex, "<span class=\"text--highlight\">$1</span>"),
+                            } }) }));
+                }
+                return (_jsx(Text, { variant: "medium", size: "sm", children: currentValue }));
+            },
         },
         {
             header: 'Client name',
             key: 'agency_name',
             width: 150,
-            cell: function (value) { return (_jsx(Text, { variant: "medium", size: "sm", children: value })); },
+            cell: function (value) {
+                if (value === void 0) { value = ''; }
+                var currentValue = String(value);
+                var regex = new RegExp("(".concat(keywords !== null && keywords !== void 0 ? keywords : '', ")"), 'gi');
+                if (regex.test(currentValue)) {
+                    return (_jsx(Text, { variant: "medium", size: "sm", children: _jsx("span", { dangerouslySetInnerHTML: {
+                                __html: currentValue.replace(regex, "<span class=\"text--highlight\">$1</span>"),
+                            } }) }));
+                }
+                return (_jsx(Text, { variant: "medium", size: "sm", children: currentValue }));
+            },
         },
         {
             header: 'Type',
@@ -61,7 +81,7 @@ export var bookingColumns = function (_a) {
             key: 'actions',
             width: 232,
             cell: function (_value, raw) {
-                return (_jsx("div", { children: _jsxs("div", { className: "flex items-center gap-x-8", children: [_jsxs("div", { className: "flex items-center gap-x-3", children: [_jsx(Button, { variant: "secondary", size: "sm", className: "w-[89px]", children: "Proforma" }), _jsx(Button, { variant: "outline-secondary", size: "sm", className: "w-[89px]", children: "Voucher" })] }), _jsx(ActionDropdown, { data: actionDropdownData(onAction) })] }) }));
+                return (_jsx("div", { children: _jsxs("div", { className: "flex items-center gap-x-8", children: [_jsxs("div", { className: "flex items-center gap-x-3", children: [_jsx(Button, { variant: "secondary", size: "sm", className: "w-[89px]", children: "Proforma" }), _jsx(Button, { variant: "outline-secondary", size: "sm", className: "w-[89px]", children: "Voucher" })] }), _jsx(ActionDropdown, { data: actionDropdownData(onAction !== null && onAction !== void 0 ? onAction : (function () { })) })] }) }));
             },
         },
     ];

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

@@ -1,17 +1,18 @@
 declare const columns: {
     quotation: (params: {
-        onExpand: (value?: import("../../../..").QuotationListItem) => void;
-        onAction: (data: {
+        onExpand?: (value?: import("../../../..").QuotationListItem) => void;
+        onAction?: (data: {
             isChild?: boolean;
             quote: import("../../../..").QuotationListItem;
         }) => (action: import("../../../..").ActionDropdownType) => void;
+        keywords?: string;
     }) => import("../TableCell").ColumnType<import("../../../..").QuotationListItem>[];
     detailResume: (params?: {
         onRemove?: (value: import("../../../..").DetailResumeItem, index?: number) => void;
     }) => import("../TableCell").ColumnType<import("../../../..").DetailResumeItem>[];
     booking: (params: {
-        onExpand: (value?: import("../../../../types/table/booking.types").BookingListItem) => void;
-        onAction: (action: import("../../../..").ActionDropdownType) => void;
+        onAction?: (action: import("../../../..").ActionDropdownType) => void;
+        keywords?: string;
     }) => import("../TableCell").ColumnType<import("../../../../types/table/booking.types").BookingListItem>[];
     bookingCancelService: (params?: {
         onRemove?: (value: import("../../../..").DetailResumeItem, index?: number, childIndex?: number) => void;

package/dist/components/organisms/Table/columns/quotation-columns.d.ts

@@ -2,9 +2,10 @@ import { ActionDropdownType } from '@/src/types/table/action-dropdown-type.types
 import { QuotationListItem } from '@/src/types/table/quotation.types';
 import { ColumnType } from '../TableCell';
 export declare const quotationColumns: (params: {
-    onExpand: (value?: QuotationListItem) => void;
-    onAction: (data: {
+    onExpand?: (value?: QuotationListItem) => void;
+    onAction?: (data: {
         isChild?: boolean;
         quote: QuotationListItem;
     }) => (action: ActionDropdownType) => void;
+    keywords?: string;
 }) => ColumnType<QuotationListItem>[];

package/dist/components/organisms/Table/columns/quotation-columns.js

@@ -7,20 +7,40 @@ import { DateDisplay } from '../../../molecules/DateDisplay/DateDisplay';
 import { cn } from '../../../../lib/utils';
 import { actionDropdownData, chipVariant, clientTypeMap } from '../constant';
 export var quotationColumns = function (_a) {
-    var onExpand = _a.onExpand, onAction = _a.onAction;
+    var onExpand = _a.onExpand, onAction = _a.onAction, _b = _a.keywords, keywords = _b === void 0 ? '' : _b;
     return [
         {
             header: 'Quote nb.',
             key: 'file_nb',
             width: 150,
-            cell: function (value) { return (_jsx(Text, { variant: "medium", size: "sm", children: value })); },
+            cell: function (value) {
+                if (value === void 0) { value = ''; }
+                var currentValue = String(value);
+                var regex = new RegExp("(".concat(keywords !== null && keywords !== void 0 ? keywords : '', ")"), 'gi');
+                if (regex.test(currentValue)) {
+                    return (_jsx(Text, { variant: "medium", size: "sm", children: _jsx("span", { dangerouslySetInnerHTML: {
+                                __html: currentValue.replace(regex, "<span class=\"text--highlight\">$1</span>"),
+                            } }) }));
+                }
+                return (_jsx(Text, { variant: "medium", size: "sm", children: currentValue }));
+            },
         },
         {
             header: 'Client name',
             key: 'agency_name',
             width: 150,
             cell: function (value, _raw, _index, childIndex) {
-                return childIndex === undefined && (_jsx(Text, { variant: "medium", size: "sm", children: value }));
+                if (value === void 0) { value = ''; }
+                if (childIndex === undefined) {
+                    var currentValue = String(value);
+                    var regex = new RegExp("(".concat(keywords !== null && keywords !== void 0 ? keywords : '', ")"), 'gi');
+                    if (regex.test(currentValue)) {
+                        return (_jsx(Text, { variant: "medium", size: "sm", children: _jsx("span", { dangerouslySetInnerHTML: {
+                                    __html: currentValue.replace(regex, "<span class=\"text--highlight\">$1</span>"),
+                                } }) }));
+                    }
+                    return (_jsx(Text, { variant: "medium", size: "sm", children: currentValue }));
+                }
             },
         },
         {
@@ -70,12 +90,12 @@ export var quotationColumns = function (_a) {
             key: 'actions',
             width: 232,
             cell: function (_value, raw, _index, childIndex) {
-                var _a;
+                var _a, _b;
                 var hasChildren = raw.children && raw.children.length > 0;
                 var isExpanded = (_a = raw.children) === null || _a === void 0 ? void 0 : _a.some(function (child) { return child.visible; });
                 var buttonLabel = isExpanded ? 'See less' : 'See more';
                 var isOnRequest = raw.status.toLowerCase() === 'on request';
-                return (_jsx("div", { children: hasChildren ? (_jsx(Button, { variant: "outline-primary", size: "sm", trailingIcon: "chevron-down", className: cn('table__button', isExpanded && 'table__button-expanded'), onClick: function () { return onExpand(raw); }, children: buttonLabel })) : (_jsxs("div", { className: "flex items-center gap-x-8", children: [_jsx(Button, { variant: isOnRequest ? 'outline-secondary' : 'secondary', size: "sm", className: "table__button", children: isOnRequest ? 'Request to book' : 'Book now' }), _jsx(ActionDropdown, { data: actionDropdownData(onAction({ isChild: childIndex !== undefined, quote: raw })) })] })) }));
+                return (_jsx("div", { children: hasChildren ? (_jsx(Button, { variant: "outline-primary", size: "sm", trailingIcon: "chevron-down", className: cn('table__button', isExpanded && 'table__button-expanded'), onClick: function () { return onExpand === null || onExpand === void 0 ? void 0 : onExpand(raw); }, children: buttonLabel })) : (_jsxs("div", { className: "flex items-center gap-x-8", children: [_jsx(Button, { variant: isOnRequest ? 'outline-secondary' : 'secondary', size: "sm", className: "table__button", children: isOnRequest ? 'Request to book' : 'Book now' }), _jsx(ActionDropdown, { data: actionDropdownData((_b = onAction === null || onAction === void 0 ? void 0 : onAction({ isChild: childIndex !== undefined, quote: raw })) !== null && _b !== void 0 ? _b : (function () { })) })] })) }));
             },
         },
     ];

package/package.json

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

package/src/components/organisms/QuoteHeader/QuoteHeader.tsx

@@ -24,7 +24,7 @@ export interface QuoteHeaderProps {
 
   onFilterChange?: (filter: FilterType, value: string) => void;
 
-  currentFilter: Record<FilterType, string>;
+  currentFilter?: Record<FilterType, string>;
 }
 
 const filterConfig = {
@@ -51,12 +51,17 @@ export function QuoteHeader(props: QuoteHeaderProps) {
     onFilterChange,
   } = props;
   const [currentValue, setCurrentValue] = useState<Record<FilterType, string>>(
-    currentFilter ?? {}
+    currentFilter || {
+      date: '',
+      clientType: '',
+      fileStatus: '',
+      search: '',
+    }
   );
   const [searchValue, setSearchValue] = useState<string>(currentFilter?.search ?? '');
 
   useEffect(() => {
-    if (Object.keys(currentFilter ?? {}).length > 0) {
+    if (currentFilter && Object.keys(currentFilter).length > 0) {
       const { search, ...rest } = currentFilter;
       setCurrentValue(rest as Record<FilterType, string>);
       setSearchValue(search);

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

@@ -7,6 +7,11 @@
   }
 }
 
+.text--highlight {
+  background-color: var(--color-amber-100);
+  font-weight: 700;
+}
+
 .table {
   width: 100%;
   border-collapse: collapse;

package/src/components/organisms/Table/columns/booking-columns.tsx

@@ -9,28 +9,64 @@ import { ColumnType } from '../TableCell';
 import { actionDropdownData } from '../constant';
 
 export const bookingColumns: (params: {
-  onExpand: (value?: BookingListItem) => void;
-  onAction: (action: ActionDropdownType) => void;
-}) => ColumnType<BookingListItem>[] = ({ onExpand, onAction }) => [
+  onAction?: (action: ActionDropdownType) => void;
+  keywords?: string;
+}) => ColumnType<BookingListItem>[] = ({ onAction, keywords = '' }) => [
   {
     header: 'Quote nb.',
     key: 'booking_id',
     width: 150,
-    cell: (value) => (
-      <Text variant="medium" size="sm">
-        {value as string}
-      </Text>
-    ),
+    cell: (value = '') => {
+      const currentValue = String(value as string);
+      const regex = new RegExp(`(${keywords ?? ''})`, 'gi');
+      if (regex.test(currentValue)) {
+        return (
+          <Text variant="medium" size="sm">
+            <span
+              dangerouslySetInnerHTML={{
+                __html: currentValue.replace(
+                  regex,
+                  `<span class="text--highlight">$1</span>`
+                ),
+              }}
+            />
+          </Text>
+        );
+      }
+      return (
+        <Text variant="medium" size="sm">
+          {currentValue}
+        </Text>
+      );
+    },
   },
   {
     header: 'Client name',
     key: 'agency_name',
     width: 150,
-    cell: (value) => (
-      <Text variant="medium" size="sm">
-        {value as string}
-      </Text>
-    ),
+    cell: (value = '') => {
+      const currentValue = String(value as string);
+      const regex = new RegExp(`(${keywords ?? ''})`, 'gi');
+      if (regex.test(currentValue)) {
+        return (
+          <Text variant="medium" size="sm">
+            <span
+              dangerouslySetInnerHTML={{
+                __html: currentValue.replace(
+                  regex,
+                  `<span class="text--highlight">$1</span>`
+                ),
+              }}
+            />
+          </Text>
+        );
+      }
+      return (
+        <Text variant="medium" size="sm">
+          {currentValue}
+        </Text>
+      );
+    },
   },
   {
     header: 'Type',
@@ -92,7 +128,7 @@ export const bookingColumns: (params: {
                 Voucher
               </Button>
             </div>
-            <ActionDropdown data={actionDropdownData(onAction)} />
+            <ActionDropdown data={actionDropdownData(onAction ?? (() => {}))} />
           </div>
         </div>
       );

package/src/components/organisms/Table/columns/quotation-columns.tsx

@@ -10,32 +10,70 @@ import { ColumnType } from '../TableCell';
 import { actionDropdownData, chipVariant, clientTypeMap } from '../constant';
 
 export const quotationColumns: (params: {
-  onExpand: (value?: QuotationListItem) => void;
-  onAction: (data: {
+  onExpand?: (value?: QuotationListItem) => void;
+  onAction?: (data: {
     isChild?: boolean;
     quote: QuotationListItem;
   }) => (action: ActionDropdownType) => void;
-}) => ColumnType<QuotationListItem>[] = ({ onExpand, onAction }) => [
+  keywords?: string;
+}) => ColumnType<QuotationListItem>[] = ({ onExpand, onAction, keywords = '' }) => [
   {
     header: 'Quote nb.',
     key: 'file_nb',
     width: 150,
-    cell: (value) => (
-      <Text variant="medium" size="sm">
-        {value as string}
-      </Text>
-    ),
+    cell: (value = '') => {
+      const currentValue = String(value as string);
+      const regex = new RegExp(`(${keywords ?? ''})`, 'gi');
+      if (regex.test(currentValue)) {
+        return (
+          <Text variant="medium" size="sm">
+            <span
+              dangerouslySetInnerHTML={{
+                __html: currentValue.replace(
+                  regex,
+                  `<span class="text--highlight">$1</span>`
+                ),
+              }}
+            />
+          </Text>
+        );
+      }
+      return (
+        <Text variant="medium" size="sm">
+          {currentValue}
+        </Text>
+      );
+    },
   },
   {
     header: 'Client name',
     key: 'agency_name',
     width: 150,
-    cell: (value, _raw, _index, childIndex) =>
-      childIndex === undefined && (
-        <Text variant="medium" size="sm">
-          {value as string}
-        </Text>
-      ),
+    cell: (value = '', _raw, _index, childIndex) => {
+      if (childIndex === undefined) {
+        const currentValue = String(value as string);
+        const regex = new RegExp(`(${keywords ?? ''})`, 'gi');
+        if (regex.test(currentValue)) {
+          return (
+            <Text variant="medium" size="sm">
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: currentValue.replace(
+                    regex,
+                    `<span class="text--highlight">$1</span>`
+                  ),
+                }}
+              />
+            </Text>
+          );
+        }
+        return (
+          <Text variant="medium" size="sm">
+            {currentValue}
+          </Text>
+        );
+      }
+    },
   },
   {
     header: 'File status',
@@ -138,7 +176,7 @@ export const quotationColumns: (params: {
               size="sm"
               trailingIcon="chevron-down"
               className={cn('table__button', isExpanded && 'table__button-expanded')}
-              onClick={() => onExpand(raw)}>
+              onClick={() => onExpand?.(raw)}>
               {buttonLabel}
             </Button>
           ) : (
@@ -151,7 +189,8 @@ export const quotationColumns: (params: {
               </Button>
               <ActionDropdown
                 data={actionDropdownData(
-                  onAction({ isChild: childIndex !== undefined, quote: raw })
+                  onAction?.({ isChild: childIndex !== undefined, quote: raw }) ??
+                    (() => {})
                 )}
               />
             </div>