mautourco-components 0.2.18 → 0.2.19

package/dist/components/organisms/Booking/BookingDocket/BookingDocket.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ResumeAccomProps, ResumeExcursionProps, ResumeOtherServiceProps, ResumeTransferProps } from '@/src/components/molecules/BookingResume';
+import './BookingDocket.css';
+export type BookingResumeData = ResumeAccomProps | ResumeTransferProps | ResumeExcursionProps | ResumeOtherServiceProps;
+export interface BookingDocketItem {
+    type: 'accommodation' | 'transfer' | 'excursion' | 'otherService';
+    data: BookingResumeData;
+}
+export interface BookingDocketProps {
+    dates: string[];
+    resumes: BookingDocketItem[];
+}
+export declare const BookingDocket: React.FC<BookingDocketProps>;

package/dist/components/organisms/Booking/BookingDocket/BookingDocket.js

@@ -0,0 +1,44 @@
+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 { useMobile } from '@/src/hooks/useMobile';
+import { AnimatePresence, domAnimation, LazyMotion } from 'motion/react';
+import * as motion from 'motion/react-m';
+import { useLayoutEffect, useRef, useState } from 'react';
+import Icon from '@/src/components/atoms/Icon/Icon';
+import { Heading, Text } from '@/src/components/atoms/Typography/Typography';
+import { BookingResume, } from '@/src/components/molecules/BookingResume';
+import { DateDisplay } from '@/src/components/molecules/DateDisplay/DateDisplay';
+import './BookingDocket.css';
+export var BookingDocket = function (props) {
+    var dates = props.dates, resumes = props.resumes;
+    var _a = useState(false), isBookingOpen = _a[0], setIsBookingOpen = _a[1];
+    var contentRef = useRef(null);
+    var _b = useState(0), height = _b[0], setHeight = _b[1];
+    var isDesktop = useMobile().isDesktop;
+    var handleBookingOpen = function () {
+        setIsBookingOpen(!isBookingOpen);
+    };
+    useLayoutEffect(function () {
+        if (!isDesktop) {
+            if (isBookingOpen && contentRef.current) {
+                var measuredHeight = contentRef.current.scrollHeight;
+                setHeight(measuredHeight + 17);
+            }
+        }
+        else {
+            setHeight('100%');
+            setIsBookingOpen(true);
+        }
+    }, [isBookingOpen, resumes, isDesktop]);
+    return (_jsx(LazyMotion, __assign({ features: domAnimation }, { children: _jsxs("div", __assign({ className: "booking-docket__container" }, { children: [!isDesktop && !isBookingOpen && (_jsx("div", __assign({ className: "flex justify-end mb-4" }, { children: _jsxs(motion.button, __assign({ className: "booking-docket__mobile-button", onClick: handleBookingOpen, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 } }, { children: [_jsx(Icon, { name: "booking", size: "lg" }), _jsx(Text, __assign({ size: "lg", as: "span", variant: "bold" }, { children: "Your booking" })), _jsx(Icon, { name: "eye", size: "lg" })] }), "booking-open") }))), _jsx(AnimatePresence, __assign({ initial: false }, { children: isBookingOpen && (_jsx(motion.div, __assign({ className: "booking-docket", initial: { height: 0, opacity: 0 }, animate: { height: height, opacity: 1 }, exit: { height: 0 } }, { children: _jsxs("div", __assign({ ref: contentRef }, { children: [_jsxs("div", __assign({ className: "booking-docket__content" }, { children: [_jsxs("div", __assign({ className: "space-y-3" }, { children: [_jsxs("div", __assign({ className: "flex items-center justify-between" }, { children: [_jsx(Heading, __assign({ level: 6, color: "accent", as: "h2" }, { children: "Your Booking" })), _jsx("img", { src: "/images/mautourco-logo.png", alt: "Mautourco Logo", width: 150 })] })), _jsxs("div", __assign({ className: "flex gap-x-4 items-center" }, { children: [_jsx(Text, __assign({ variant: "bold", size: "lg" }, { children: "Booking file date range :" })), _jsx(DateDisplay, { dates: dates })] }))] })), _jsx(BookingResume, { children: resumes.map(function (resume, index) { return (_jsxs("div", { children: [resume.type === 'accommodation' && (_jsx(BookingResume.Accommodation, __assign({}, resume.data))), resume.type === 'transfer' && (_jsx(BookingResume.Transfer, __assign({}, resume.data))), resume.type === 'excursion' && (_jsx(BookingResume.Excursion, __assign({}, resume.data))), resume.type === 'otherService' && (_jsx(BookingResume.OtherService, __assign({}, resume.data)))] }, index)); }) })] })), _jsx("img", { src: "/images/svg/resume-bottom-bg.svg", alt: "bottom background", className: "booking-docket__bg" })] })) }), "booking-docket")) })), !isDesktop && isBookingOpen && (_jsx("div", __assign({ className: "flex justify-end mt-10" }, { children: _jsxs(motion.button, __assign({ className: "booking-docket__mobile-button", onClick: handleBookingOpen, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 } }, { children: [_jsx(Text, __assign({ size: "lg", as: "span", variant: "bold" }, { children: "Close" })), _jsx(Icon, { name: "close-circle", size: "lg" })] }), "booking-close") })))] })) })));
+};