mautourco-components 0.2.29 → 0.2.30

package/dist/components/molecules/DateDisplay/DateDisplay.d.ts

@@ -12,6 +12,10 @@ export interface DateDisplayProps {
     calendarSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     /** Size of the text */
     textSize?: TextProps['size'];
+    /** Text color */
+    textColor?: TextProps['color'];
+    /** Direction of the dates */
+    direction?: 'horizontal' | 'vertical';
     /** Color mode: 'black' for default black color, 'green' for accent green color */
     colorMode?: 'black' | 'green';
     /** Custom className */

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

@@ -26,11 +26,9 @@ import './DateDisplay.css';
  * @returns
  */
 export var DateDisplay = function (_a) {
-    var dates = _a.dates, date = _a.date, _b = _a.arrowSize, arrowSize = _b === void 0 ? 'sm' : _b, _c = _a.calendarSize, calendarSize = _c === void 0 ? 'sm' : _c, _d = _a.textSize, textSize = _d === void 0 ? 'sm' : _d, _e = _a.colorMode, colorMode = _e === void 0 ? 'black' : _e, _f = _a.className, className = _f === void 0 ? '' : _f;
-    // Support both new API (date) and old API (dates) for backward compatibility
-    var datesToDisplay = date ? [date] : dates || [];
+    var _b = _a.dates, dates = _b === void 0 ? [] : _b, _c = _a.arrowSize, arrowSize = _c === void 0 ? 'sm' : _c, _d = _a.calendarSize, calendarSize = _d === void 0 ? 'sm' : _d, _e = _a.textSize, textSize = _e === void 0 ? 'sm' : _e, _f = _a.colorMode, colorMode = _f === void 0 ? 'black' : _f, _g = _a.className, className = _g === void 0 ? '' : _g;
     var formattedDates = useMemo(function () {
-        return datesToDisplay.map(function (d) {
+        return dates.map(function (d) {
             var dateObj = typeof d === 'string' ? new Date(d) : d;
             // Check if the date is valid then format it to dd/MM/yyyy format
             if (isValid(dateObj)) {
@@ -39,7 +37,7 @@ export var DateDisplay = function (_a) {
             // If the date is not valid, return the original date
             return typeof d === 'string' ? d : d.toString();
         });
-    }, [datesToDisplay]);
+    }, [dates]);
     var iconColor = colorMode === 'green'
         ? 'var(--color-atoll-green-800)'
         : 'var(--color-text-default, #000000)';

package/dist/components/molecules/DialogContentPolicy/CancellationLayout/CancellationLayout.css

@@ -2116,11 +2116,61 @@
       transparent 16px
     );
   }
+  &:last-child {
+    &::after {
+      display: none;
+    }
+  }
   .chip__label {
     column-gap: 1rem;
   }
 }
 
+.cancellation-layout__fee {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  &::before,
+  &::after {
+    content: '';
+  }
+  &::before,
+  &::after {
+    position: absolute;
+  }
+  &::before,
+  &::after {
+    top: 0px;
+  }
+  &::before,
+  &::after {
+    left: 0px;
+  }
+  &::before,
+  &::after {
+    right: 0px;
+  }
+  &::before,
+  &::after {
+    height: 1px;
+    background-color: transparent;
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--color-surface-300) 0,
+      var(--color-surface-300) 4px,
+      transparent 4px,
+      transparent 8px
+    );
+  }
+  &::after {
+    top: initial;
+    bottom: 0;
+  }
+}
+
 .cancellation-layout__content {
   display: flex;
   align-items: flex-start;

package/dist/components/molecules/DialogContentPolicy/CancellationLayout/CancellationLayout.d.ts

@@ -7,5 +7,7 @@ export interface CancellationLayoutProps {
     children?: React.ReactNode;
     className?: string;
     image: string;
+    cancellationFee?: number;
+    currency?: string;
 }
 export declare const CancellationLayout: React.FC<CancellationLayoutProps>;

package/dist/components/molecules/DialogContentPolicy/CancellationLayout/CancellationLayout.js

@@ -10,10 +10,11 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../../../atoms/Typography/Typography';
 import { cn } from '../../../../lib/utils';
 import { ServiceTitle } from '../../ServiceTitle/ServiceTitle';
 import './CancellationLayout.css';
 export var CancellationLayout = function (props) {
-    var title = props.title, icon = props.icon, children = props.children, className = props.className, image = props.image;
-    return (_jsxs("div", __assign({ className: cn('cancellation-layout', className) }, { children: [_jsx(ServiceTitle, { title: title, icon: icon }), _jsxs("div", __assign({ className: "cancellation-layout__content" }, { children: [_jsx("div", __assign({ className: "cancellation-layout__content-left" }, { children: children })), _jsx("figure", __assign({ className: "cancellation-layout__content-right" }, { children: _jsx("img", { src: image, alt: (title === null || title === void 0 ? void 0 : title.toString()) || '', width: 150, height: 200 }) }))] }))] })));
+    var title = props.title, icon = props.icon, children = props.children, className = props.className, image = props.image, cancellationFee = props.cancellationFee, currency = props.currency;
+    return (_jsxs("div", __assign({ className: cn('cancellation-layout', className) }, { children: [_jsx(ServiceTitle, { title: title, icon: icon }), _jsxs("div", __assign({ className: "cancellation-layout__content" }, { children: [_jsx("div", __assign({ className: "cancellation-layout__content-left" }, { children: children })), _jsx("figure", __assign({ className: "cancellation-layout__content-right" }, { children: _jsx("img", { src: image, alt: (title === null || title === void 0 ? void 0 : title.toString()) || '', width: 150, height: 200 }) }))] })), cancellationFee && (_jsxs("div", __assign({ className: "cancellation-layout__fee" }, { children: [_jsx(Text, __assign({ variant: "medium" }, { children: "Cancellation fee (VAT Incl) :" })), _jsxs(Text, __assign({ variant: "bold" }, { children: [currency, " ", cancellationFee] }))] })))] })));
 };

package/dist/components/molecules/DialogContentPolicy/DialogCancellationAccom.d.ts

@@ -5,5 +5,7 @@ export interface DialogCancellationAccomProps {
     hotelName: string;
     dates: string[];
     rooms: RoomItem[];
+    cancellationFee?: number;
+    currency?: string;
 }
 export declare const DialogCancellationAccom: React.FC<DialogCancellationAccomProps>;

package/dist/components/molecules/DialogContentPolicy/DialogCancellationAccom.js

@@ -18,7 +18,7 @@ import { DateDisplay } from '../DateDisplay/DateDisplay';
 import TextWithIcon from '../TextWithIcon/TextWithIcon';
 import { CancellationLayout } from './CancellationLayout/CancellationLayout';
 export var DialogCancellationAccom = function (props) {
-    var image = props.image, hotelName = props.hotelName, dates = props.dates, rooms = props.rooms;
+    var image = props.image, hotelName = props.hotelName, dates = props.dates, rooms = props.rooms, cancellationFee = props.cancellationFee, currency = props.currency;
     var stay = useStays(dates);
-    return (_jsx(CancellationLayout, __assign({ title: "Accommodation", icon: "accom", image: image }, { children: _jsxs("div", __assign({ className: "space-y-6" }, { children: [_jsxs("div", __assign({ className: "space-y-1" }, { children: [_jsx(Text, __assign({ variant: "bold" }, { children: hotelName })), _jsx(DateDisplay, { dates: dates }), _jsxs(TextWithIcon, __assign({ icon: "night", textLeading: "4" }, { children: [stay, " Nights"] }))] })), _jsx("div", __assign({ className: "" }, { children: rooms.map(function (room, index) { return (_jsxs("div", __assign({ className: "space-y-4" }, { children: [_jsxs("div", __assign({ className: "space-y-1" }, { children: [_jsxs(TextWithIcon, __assign({ icon: "accom", textLeading: "4" }, { children: [index + 1, " Room"] })), _jsx(Text, __assign({ size: "sm" }, { children: room.RoomName }))] })), room.cancellation_policy.map(function (policy) { return (_jsxs(Fragment, { children: [_jsxs(Chip, __assign({ type: "outline", color: "brand", isBlackText: true }, { children: ["Policy period applies", ' ', _jsx(DateDisplay, { dates: [policy.ValidFrom, policy.ValidTo], textSize: "xs" })] })), _jsxs(Text, __assign({ variant: "bold", size: "xs", leading: "4" }, { children: [policy.Value, " % of total price"] })), _jsx(Text, __assign({ size: "xs", leading: "4" }, { children: policy.Description }))] }, "policy-".concat(index))); })] }), "rm-".concat(index))); }) }))] })) })));
+    return (_jsx(CancellationLayout, __assign({ title: "Accommodation", icon: "accom", image: image, cancellationFee: cancellationFee, currency: currency }, { children: _jsxs("div", __assign({ className: "space-y-6" }, { children: [_jsxs("div", __assign({ className: "space-y-1" }, { children: [_jsx(Text, __assign({ variant: "bold" }, { children: hotelName })), _jsx(DateDisplay, { dates: dates }), _jsxs(TextWithIcon, __assign({ icon: "night", textLeading: "4" }, { children: [stay, " Nights"] }))] })), _jsx("div", __assign({ className: "" }, { children: rooms.map(function (room, index) { return (_jsxs("div", __assign({ className: "space-y-4" }, { children: [_jsxs("div", __assign({ className: "space-y-1" }, { children: [_jsxs(TextWithIcon, __assign({ icon: "accom", textLeading: "4" }, { children: [index + 1, " Room"] })), _jsx(Text, __assign({ size: "sm" }, { children: room.RoomName }))] })), room.cancellation_policy.map(function (policy) { return (_jsxs(Fragment, { children: [_jsxs(Chip, __assign({ type: "outline", color: "brand", isBlackText: true }, { children: ["Policy period applies", ' ', _jsx(DateDisplay, { dates: [policy.ValidFrom, policy.ValidTo], textSize: "xs" })] })), _jsxs(Text, __assign({ variant: "bold", size: "xs", leading: "4" }, { children: [policy.Value, " % of total price"] })), _jsx(Text, __assign({ size: "xs", leading: "4" }, { children: policy.Description }))] }, "policy-".concat(index))); })] }), "rm-".concat(index))); }) }))] })) })));
 };

package/dist/components/molecules/DialogContentPolicy/DialogCancellationExcursion.d.ts

@@ -13,5 +13,7 @@ export interface DialogCancellationExcursionProps {
         accessibility: string;
         transferType: string;
     };
+    cancellationFee?: number;
+    currency?: string;
 }
 export declare const DialogCancellationExcursion: React.FC<DialogCancellationExcursionProps>;

package/dist/components/molecules/DialogContentPolicy/DialogCancellationExcursion.js

@@ -15,6 +15,6 @@ import { DateDisplay } from '../DateDisplay/DateDisplay';
 import { ServiceInfo } from '../ServiceInfo/ServiceInfo';
 import { CancellationLayout } from './CancellationLayout/CancellationLayout';
 export var DialogCancellationExcursion = function (props) {
-    var image = props.image, excursionName = props.excursionName, date = props.date, details = props.details, policy = props.policy;
-    return (_jsx(CancellationLayout, __assign({ title: "Excursion", icon: "map", image: image }, { children: _jsxs("div", __assign({ className: "space-y-6" }, { children: [_jsxs("div", __assign({ className: "space-y-1" }, { children: [_jsx(Text, __assign({ variant: "bold" }, { children: excursionName })), _jsx(DateDisplay, { dates: [date] })] })), _jsxs(ServiceInfo, { children: [_jsx(ServiceInfo.Item, __assign({ icon: "stopwatch", label: "Duration" }, { children: details.duration })), _jsx(ServiceInfo.Item, __assign({ icon: "utensils", label: "Meal" }, { children: details.meal })), _jsx(ServiceInfo.Item, __assign({ icon: "bike", label: "Difficulty" }, { children: details.accessibility })), _jsx(ServiceInfo.Item, __assign({ icon: "car", label: "Transfer Type" }, { children: details.transferType }))] }), _jsxs("div", __assign({ className: "" }, { children: [_jsx(Text, __assign({ variant: "bold", size: "xs", leading: "4" }, { children: policy.title })), _jsx(Text, __assign({ size: "xs", leading: "4" }, { children: policy.description }))] }))] })) })));
+    var image = props.image, excursionName = props.excursionName, date = props.date, details = props.details, policy = props.policy, cancellationFee = props.cancellationFee, currency = props.currency;
+    return (_jsx(CancellationLayout, __assign({ title: "Excursion", icon: "map", image: image, cancellationFee: cancellationFee, currency: currency }, { children: _jsxs("div", __assign({ className: "space-y-6" }, { children: [_jsxs("div", __assign({ className: "space-y-1" }, { children: [_jsx(Text, __assign({ variant: "bold" }, { children: excursionName })), _jsx(DateDisplay, { dates: [date] })] })), _jsxs(ServiceInfo, { children: [_jsx(ServiceInfo.Item, __assign({ icon: "stopwatch", label: "Duration" }, { children: details.duration })), _jsx(ServiceInfo.Item, __assign({ icon: "utensils", label: "Meal" }, { children: details.meal })), _jsx(ServiceInfo.Item, __assign({ icon: "bike", label: "Difficulty" }, { children: details.accessibility })), _jsx(ServiceInfo.Item, __assign({ icon: "car", label: "Transfer Type" }, { children: details.transferType }))] }), _jsxs("div", __assign({ className: "" }, { children: [_jsx(Text, __assign({ variant: "bold", size: "xs", leading: "4" }, { children: policy.title })), _jsx(Text, __assign({ size: "xs", leading: "4" }, { children: policy.description }))] }))] })) })));
 };

package/dist/components/molecules/DialogContentPolicy/DialogCancellationList.d.ts

@@ -17,6 +17,7 @@ export interface DialogCancellationListProps {
      */
     cancellations: CancellationItem[];
 }
+export declare const DialogCancellations: (props: DialogCancellationListProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * DialogCancellationList is a component that allows the user to display the cancellations.
  *

package/dist/components/molecules/DialogContentPolicy/DialogCancellationList.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { DialogCancellationAccom, } from './DialogCancellationAccom';
 import { DialogCancellationExcursion, } from './DialogCancellationExcursion';
 import { DialogContentPolicy } from './DialogContentPolicy';
@@ -19,6 +19,18 @@ var isAccommodation = function (data) {
 var isExcursion = function (data) {
     return 'excursionName' in data;
 };
+export var DialogCancellations = function (props) {
+    var cancellations = props.cancellations;
+    return (_jsx(_Fragment, { children: cancellations.map(function (c, index) {
+            if (c.type === 'accommodation' && isAccommodation(c.data)) {
+                return _jsx(DialogCancellationAccom, __assign({}, c.data), "acc-".concat(index));
+            }
+            if (c.type === 'excursion' && isExcursion(c.data)) {
+                return _jsx(DialogCancellationExcursion, __assign({}, c.data), "exc-".concat(index));
+            }
+            return null;
+        }) }));
+};
 /**
  * DialogCancellationList is a component that allows the user to display the cancellations.
  *
@@ -31,14 +43,5 @@ var isExcursion = function (data) {
  * @returns The DialogCancellationList component.
  */
 export var DialogCancellationList = function (props) {
-    var cancellations = props.cancellations;
-    return (_jsx(DialogContentPolicy, { children: cancellations.map(function (c, index) {
-            if (c.type === 'accommodation' && isAccommodation(c.data)) {
-                return _jsx(DialogCancellationAccom, __assign({}, c.data), "acc-".concat(index));
-            }
-            if (c.type === 'excursion' && isExcursion(c.data)) {
-                return _jsx(DialogCancellationExcursion, __assign({}, c.data), "exc-".concat(index));
-            }
-            return null;
-        }) }));
+    return (_jsx(DialogContentPolicy, { children: _jsx(DialogCancellations, __assign({}, props)) }));
 };

package/dist/components/organisms/CancelService/CancelPolicy.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { CancellationItem } from '../../molecules/DialogContentPolicy/DialogCancellationList';
+export interface CancelPolicyProps {
+    /**
+     * The cancellations to display.
+     */
+    cancellations: CancellationItem[];
+    /**
+     * Whether the policy is transgressed.
+     */
+    isPolicyTransgressed?: boolean;
+    /**
+     * The cancellation fee.
+     */
+    cancellationFee?: number;
+    /**
+     * The currency of the cancellation fee.
+     */
+    currency?: string;
+    /**
+     * Whether the policy is being processed.
+     */
+    isProcessing?: boolean;
+    /**
+     * The callback function to call when the proceed to payment button is clicked.
+     */
+    onProceedToPayment?: () => void;
+}
+export declare const CancelPolicy: React.FC<CancelPolicyProps>;

package/dist/components/organisms/CancelService/CancelPolicy.js

@@ -0,0 +1,19 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from '../../atoms/Button/Button';
+import { Text } from '../../atoms/Typography/Typography';
+import { DialogCancellations, } from '../../molecules/DialogContentPolicy/DialogCancellationList';
+export var CancelPolicy = function (props) {
+    var cancellations = props.cancellations, isPolicyTransgressed = props.isPolicyTransgressed, isProcessing = props.isProcessing, onProceedToPayment = props.onProceedToPayment;
+    return (_jsxs("div", { children: [isPolicyTransgressed && (_jsx(Text, __assign({ color: "state-error" }, { children: "It appears that removing this item violates one or more cancellation policies. Please settle the cancellation fee if you wish to proceed with this item\u2019s cancellation." }))), _jsx("div", __assign({ className: "max-h-[400px] overflow-y-auto -mr-5 pr-2.5" }, { children: _jsx(DialogCancellations, { cancellations: cancellations }) })), _jsx("div", __assign({ className: "flex justify-end mt-9" }, { children: _jsx(Button, __assign({ variant: "secondary", size: "sm", className: "w-[250px]", disabled: isProcessing, onClick: onProceedToPayment }, { children: "Proceed to payment" })) }))] }));
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface CancelServiceProps {
+    open: boolean;
+    children?: React.ReactNode;
+    title?: string;
+    className?: string;
+    setOpen: (open: boolean) => void;
+}
+export declare const CancelService: {
+    (props: CancelServiceProps): import("react/jsx-runtime").JSX.Element;
+    FromList: <T extends import("../Table").TableRowData<T> = import("../../..").DetailResumeItem>(props: import("./FromList").FromListProps<T>) => import("react/jsx-runtime").JSX.Element;
+    Confirm: React.FC<import("./ConfirmDelete/ConfirmDelete").ConfirmDeleteProps>;
+    CancelPolicy: React.FC<import("./CancelPolicy").CancelPolicyProps>;
+};

package/dist/components/organisms/CancelService/CancelService.js

@@ -0,0 +1,23 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DialogBookingConfirm } from '../DialogBookingConfirm';
+import { CancelPolicy } from './CancelPolicy';
+import { ConfirmDelete } from './ConfirmDelete/ConfirmDelete';
+import { FromList } from './FromList';
+export var CancelService = function (props) {
+    var open = props.open, children = props.children, title = props.title, className = props.className, setOpen = props.setOpen;
+    return (_jsx(DialogBookingConfirm, __assign({ title: title, open: open, setOpen: setOpen, className: className }, { children: children })));
+};
+CancelService.FromList = FromList;
+CancelService.Confirm = ConfirmDelete;
+CancelService.CancelPolicy = CancelPolicy;