mautourco-components 0.2.153 → 0.2.155

package/dist/components/atoms/BookingDocketDeco/BookingDocketDeco.d.ts

@@ -0,0 +1 @@
+export default function BookingDocketDeco(): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/BookingDocketDeco/BookingDocketDeco.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function BookingDocketDeco() {
+    return (_jsx("svg", { width: "665", height: "27", viewBox: "0 0 665 27", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M461.04 0H86.7702H0.449836C0.444245 0 0.439683 0.00447865 0.439579 0.0100695L0.00318104 23.4692C-0.0286297 25.1793 1.65547 26.396 3.26898 25.8287L15.7282 21.4483C17.4456 20.8445 19.3176 20.8445 21.035 21.4483L35.499 26.5336C36.3577 26.8355 37.2937 26.8355 38.1524 26.5336L52.6164 21.4483C54.3339 20.8445 56.2058 20.8445 57.9233 21.4483L72.3872 26.5336C73.2459 26.8355 74.1819 26.8355 75.0406 26.5336L89.5047 21.4483C91.2221 20.8445 93.0941 20.8445 94.8115 21.4483L109.275 26.5336C110.134 26.8355 111.07 26.8355 111.929 26.5336L126.393 21.4483C128.11 20.8445 129.982 20.8445 131.7 21.4483L146.164 26.5336C147.022 26.8355 147.958 26.8355 148.817 26.5336L163.281 21.4483C164.999 20.8445 166.87 20.8445 168.588 21.4483L183.052 26.5336C183.911 26.8355 184.847 26.8355 185.705 26.5336L200.169 21.4483C201.887 20.8445 203.759 20.8445 205.476 21.4483L219.94 26.5336C220.799 26.8355 221.735 26.8355 222.594 26.5336L237.058 21.4483C238.775 20.8445 240.647 20.8445 242.364 21.4483L256.828 26.5336C257.687 26.8355 258.623 26.8355 259.482 26.5336L273.946 21.4483C275.663 20.8445 277.535 20.8445 279.253 21.4483L293.717 26.5336C294.575 26.8355 295.511 26.8355 296.37 26.5336L310.834 21.4483C312.551 20.8445 314.423 20.8445 316.141 21.4483L330.605 26.5336C331.464 26.8355 332.4 26.8355 333.258 26.5336L347.722 21.4483C349.44 20.8445 351.312 20.8445 353.029 21.4483L367.493 26.5336C368.352 26.8355 369.288 26.8355 370.146 26.5336L384.61 21.4483C386.328 20.8445 388.2 20.8445 389.917 21.4483L404.381 26.5336C405.24 26.8355 406.176 26.8355 407.035 26.5336L421.499 21.4483C423.216 20.8445 425.088 20.8445 426.806 21.4483L441.27 26.5336C442.128 26.8355 443.064 26.8355 443.923 26.5336L458.387 21.4483C460.104 20.8445 461.976 20.8445 463.694 21.4483L478.158 26.5336C479.016 26.8355 479.952 26.8355 480.811 26.5336L495.275 21.4483C496.993 20.8445 498.865 20.8445 500.582 21.4483L515.046 26.5336C515.905 26.8355 516.841 26.8355 517.699 26.5336L532.163 21.4483C533.881 20.8445 535.753 20.8445 537.47 21.4483L551.934 26.5336C552.793 26.8355 553.729 26.8355 554.588 26.5336L569.052 21.4483C570.769 20.8445 572.641 20.8445 574.358 21.4483L588.822 26.5336C589.681 26.8355 590.617 26.8355 591.476 26.5336L605.94 21.4483C607.657 20.8445 609.529 20.8445 611.247 21.4483L625.711 26.5336C626.569 26.8355 627.505 26.8355 628.364 26.5336L642.864 21.4357C644.559 20.8396 646.406 20.8318 648.107 21.4135L661.232 25.9034C662.804 26.441 664.438 25.273 664.438 23.6121V0.499634C664.438 0.223694 664.662 0 664.938 0H461.04Z", fill: "white" }) }));
+}

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

@@ -46,6 +46,10 @@
   position: relative;
   top: -1px;
   width: 100%;
+  svg {
+    width: 100%;
+    height: auto;
+  }
 }
 
 .booking-docket__content {

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

@@ -8,5 +8,6 @@ export interface BookingDocketItem {
 export interface BookingDocketProps {
     dates: string[];
     resumes: BookingDocketItem[];
+    logo?: string;
 }
 export declare function BookingDocket(props: BookingDocketProps): import("react/jsx-runtime").JSX.Element;

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

@@ -14,16 +14,17 @@ import { useMobile } from '../../../../hooks/useMobile';
 import { AnimatePresence, domAnimation, LazyMotion } from 'motion/react';
 import * as motion from 'motion/react-m';
 import { useLayoutEffect, useRef, useState } from 'react';
+import BookingDocketDeco from '../../../atoms/BookingDocketDeco/BookingDocketDeco';
 import Icon from '../../../atoms/Icon/Icon';
 import { Heading, Text } from '../../../atoms/Typography/Typography';
 import { BookingResume, } from '../../../molecules/BookingResume/index';
 import { DateDisplay } from '../../../molecules/DateDisplay/DateDisplay';
 import './BookingDocket.css';
 export function BookingDocket(props) {
-    var dates = props.dates, resumes = props.resumes;
-    var _a = useState(false), isBookingOpen = _a[0], setIsBookingOpen = _a[1];
+    var dates = props.dates, resumes = props.resumes, _a = props.logo, logo = _a === void 0 ? '/images/mautourco-logo.png' : _a;
+    var _b = useState(false), isBookingOpen = _b[0], setIsBookingOpen = _b[1];
     var contentRef = useRef(null);
-    var _b = useState(0), height = _b[0], setHeight = _b[1];
+    var _c = useState(0), height = _c[0], setHeight = _c[1];
     var isDesktop = useMobile().isDesktop;
     var handleBookingOpen = function () {
         setIsBookingOpen(!isBookingOpen);
@@ -40,5 +41,5 @@ export function BookingDocket(props) {
             setIsBookingOpen(true);
         }
     }, [isBookingOpen, resumes, isDesktop]);
-    return (_jsx(LazyMotion, { features: domAnimation, children: _jsxs("div", { className: "booking-docket__container", children: [!isDesktop && !isBookingOpen && (_jsx("div", { className: "flex justify-end mb-4", children: _jsxs(motion.button, { 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, { size: "lg", as: "span", variant: "bold", children: "Your booking" }), _jsx(Icon, { name: "eye", size: "lg" })] }, "booking-open") })), _jsx(AnimatePresence, { initial: false, children: isBookingOpen && (_jsx(motion.div, { className: "booking-docket", initial: { height: 0, opacity: 0 }, animate: { height: height, opacity: 1 }, exit: { height: 0 }, children: _jsxs("div", { ref: contentRef, children: [_jsxs("div", { className: "booking-docket__content", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Heading, { level: 6, color: "accent", as: "h2", children: "Your Booking" }), _jsx("img", { src: "/images/mautourco-logo.png", alt: "Mautourco Logo", width: 150 })] }), _jsxs("div", { className: "flex gap-x-4 items-center", children: [_jsx(Text, { 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", { className: "flex justify-end mt-10", children: _jsxs(motion.button, { className: "booking-docket__mobile-button", onClick: handleBookingOpen, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: [_jsx(Text, { size: "lg", as: "span", variant: "bold", children: "Close" }), _jsx(Icon, { name: "close-circle", size: "lg" })] }, "booking-close") }))] }) }));
+    return (_jsx(LazyMotion, { features: domAnimation, children: _jsxs("div", { className: "booking-docket__container", children: [!isDesktop && !isBookingOpen && (_jsx("div", { className: "flex justify-end mb-4", children: _jsxs(motion.button, { 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, { size: "lg", as: "span", variant: "bold", children: "Your booking" }), _jsx(Icon, { name: "eye", size: "lg" })] }, "booking-open") })), _jsx(AnimatePresence, { initial: false, children: isBookingOpen && (_jsx(motion.div, { className: "booking-docket", initial: { height: 0, opacity: 0 }, animate: { height: height, opacity: 1 }, exit: { height: 0 }, children: _jsxs("div", { ref: contentRef, children: [_jsxs("div", { className: "booking-docket__content", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Heading, { level: 6, color: "accent", as: "h2", children: "Your Booking" }), _jsx("img", { src: logo, alt: "Mautourco Logo", width: 150 })] }), _jsxs("div", { className: "flex flex-col xl:flex-row gap-x-4 xl:items-center", children: [_jsx(Text, { 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("div", { className: "booking-docket__bg", children: _jsx(BookingDocketDeco, {}) })] }) }, "booking-docket")) }), !isDesktop && isBookingOpen && (_jsx("div", { className: "flex justify-end mt-10", children: _jsxs(motion.button, { className: "booking-docket__mobile-button", onClick: handleBookingOpen, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: [_jsx(Text, { size: "lg", as: "span", variant: "bold", children: "Close" }), _jsx(Icon, { name: "close-circle", size: "lg" })] }, "booking-close") }))] }) }));
 }

package/package.json

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

package/src/components/atoms/BookingDocketDeco/BookingDocketDeco.tsx

@@ -0,0 +1,15 @@
+export default function BookingDocketDeco() {
+  return (
+    <svg
+      width="665"
+      height="27"
+      viewBox="0 0 665 27"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M461.04 0H86.7702H0.449836C0.444245 0 0.439683 0.00447865 0.439579 0.0100695L0.00318104 23.4692C-0.0286297 25.1793 1.65547 26.396 3.26898 25.8287L15.7282 21.4483C17.4456 20.8445 19.3176 20.8445 21.035 21.4483L35.499 26.5336C36.3577 26.8355 37.2937 26.8355 38.1524 26.5336L52.6164 21.4483C54.3339 20.8445 56.2058 20.8445 57.9233 21.4483L72.3872 26.5336C73.2459 26.8355 74.1819 26.8355 75.0406 26.5336L89.5047 21.4483C91.2221 20.8445 93.0941 20.8445 94.8115 21.4483L109.275 26.5336C110.134 26.8355 111.07 26.8355 111.929 26.5336L126.393 21.4483C128.11 20.8445 129.982 20.8445 131.7 21.4483L146.164 26.5336C147.022 26.8355 147.958 26.8355 148.817 26.5336L163.281 21.4483C164.999 20.8445 166.87 20.8445 168.588 21.4483L183.052 26.5336C183.911 26.8355 184.847 26.8355 185.705 26.5336L200.169 21.4483C201.887 20.8445 203.759 20.8445 205.476 21.4483L219.94 26.5336C220.799 26.8355 221.735 26.8355 222.594 26.5336L237.058 21.4483C238.775 20.8445 240.647 20.8445 242.364 21.4483L256.828 26.5336C257.687 26.8355 258.623 26.8355 259.482 26.5336L273.946 21.4483C275.663 20.8445 277.535 20.8445 279.253 21.4483L293.717 26.5336C294.575 26.8355 295.511 26.8355 296.37 26.5336L310.834 21.4483C312.551 20.8445 314.423 20.8445 316.141 21.4483L330.605 26.5336C331.464 26.8355 332.4 26.8355 333.258 26.5336L347.722 21.4483C349.44 20.8445 351.312 20.8445 353.029 21.4483L367.493 26.5336C368.352 26.8355 369.288 26.8355 370.146 26.5336L384.61 21.4483C386.328 20.8445 388.2 20.8445 389.917 21.4483L404.381 26.5336C405.24 26.8355 406.176 26.8355 407.035 26.5336L421.499 21.4483C423.216 20.8445 425.088 20.8445 426.806 21.4483L441.27 26.5336C442.128 26.8355 443.064 26.8355 443.923 26.5336L458.387 21.4483C460.104 20.8445 461.976 20.8445 463.694 21.4483L478.158 26.5336C479.016 26.8355 479.952 26.8355 480.811 26.5336L495.275 21.4483C496.993 20.8445 498.865 20.8445 500.582 21.4483L515.046 26.5336C515.905 26.8355 516.841 26.8355 517.699 26.5336L532.163 21.4483C533.881 20.8445 535.753 20.8445 537.47 21.4483L551.934 26.5336C552.793 26.8355 553.729 26.8355 554.588 26.5336L569.052 21.4483C570.769 20.8445 572.641 20.8445 574.358 21.4483L588.822 26.5336C589.681 26.8355 590.617 26.8355 591.476 26.5336L605.94 21.4483C607.657 20.8445 609.529 20.8445 611.247 21.4483L625.711 26.5336C626.569 26.8355 627.505 26.8355 628.364 26.5336L642.864 21.4357C644.559 20.8396 646.406 20.8318 648.107 21.4135L661.232 25.9034C662.804 26.441 664.438 25.273 664.438 23.6121V0.499634C664.438 0.223694 664.662 0 664.938 0H461.04Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/src/components/organisms/Booking/BookingDocket/BookingDocket.css

@@ -42,6 +42,10 @@
   position: relative;
   top: -1px;
   width: 100%;
+  svg {
+    width: 100%;
+    height: auto;
+  }
 }
 
 .booking-docket__content {

package/src/components/organisms/Booking/BookingDocket/BookingDocket.tsx

@@ -3,6 +3,7 @@ import { AnimatePresence, domAnimation, LazyMotion } from 'motion/react';
 import * as motion from 'motion/react-m';
 import { useLayoutEffect, useRef, useState } from 'react';
 
+import BookingDocketDeco from '@/src/components/atoms/BookingDocketDeco/BookingDocketDeco';
 import Icon from '@/src/components/atoms/Icon/Icon';
 import { Heading, Text } from '@/src/components/atoms/Typography/Typography';
 import {
@@ -29,10 +30,11 @@ export interface BookingDocketItem {
 export interface BookingDocketProps {
   dates: string[];
   resumes: BookingDocketItem[];
+  logo?: string;
 }
 
 export function BookingDocket(props: BookingDocketProps) {
-  const { dates, resumes } = props;
+  const { dates, resumes, logo = '/images/mautourco-logo.png' } = props;
   const [isBookingOpen, setIsBookingOpen] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number | string>(0);
@@ -92,13 +94,9 @@ export function BookingDocket(props: BookingDocketProps) {
                       <Heading level={6} color="accent" as="h2">
                         Your Booking
                       </Heading>
-                      <img
-                        src="/images/mautourco-logo.png"
-                        alt="Mautourco Logo"
-                        width={150}
-                      />
+                      <img src={logo} alt="Mautourco Logo" width={150} />
                     </div>
-                    <div className="flex gap-x-4 items-center">
+                    <div className="flex flex-col xl:flex-row gap-x-4 xl:items-center">
                       <Text variant="bold" size="lg">
                         Booking file date range :
                       </Text>
@@ -132,11 +130,9 @@ export function BookingDocket(props: BookingDocketProps) {
                     ))}
                   </BookingResume>
                 </div>
-                <img
-                  src="/images/svg/resume-bottom-bg.svg"
-                  alt="bottom background"
-                  className="booking-docket__bg"
-                />
+                <div className="booking-docket__bg">
+                  <BookingDocketDeco />
+                </div>
               </div>
             </motion.div>
           )}