mautourco-components 0.2.21 → 0.2.22

package/src/components/organisms/DialogBookingConfirm/BookingReference.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import Button from '../../atoms/Button/Button';
+import Input from '../../atoms/Inputs/Input/Input';
+import { Text } from '../../atoms/Typography/Typography';
+import { DialogBookingConfirm } from './DialogBookingConfirm';
+
+export interface BookingReferenceProps {
+  /**
+   * Whether the dialog is open.
+   */
+  open: boolean;
+  /**
+   * The callback function to call when the dialog is closed.
+   */
+  setOpen: (open: boolean) => void;
+  /**
+   * The callback function to call when the cancel button is clicked.
+   */
+  onCancel: () => void;
+  /**
+   * The callback function to call when the confirm button is clicked.
+   */
+  onConfirm: (ref: string) => void;
+}
+
+/**
+ * BookingReference is a component that allows the user to display the booking reference.
+ *
+ * @example
+ * <BookingReference
+ *  open={open}
+ *  setOpen={setOpen}
+ *  onCancel={onCancel}
+ *  onConfirm={onConfirm}
+ * />
+ *
+ *
+ * @param props - The props for the BookingReference component.
+ * @returns The BookingReference component.
+ */
+export const BookingReference: React.FC<BookingReferenceProps> = (props) => {
+  const { open, setOpen, onCancel, onConfirm } = props;
+  const [reference, setReference] = useState('');
+  return (
+    <DialogBookingConfirm
+      open={open}
+      setOpen={setOpen}
+      title="Reference number"
+      className="!max-w-[500px]">
+      <div className="space-y-9">
+        <div className="space-y-2">
+          <label>
+            <Text as="span" size="sm">
+              Reference number
+            </Text>
+          </label>
+          <Input
+            placeholder="Please insert a reference number"
+            value={reference}
+            onChange={(e) => setReference(e.target.value)}
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-x-4">
+          <Button variant="outline-secondary" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button variant="secondary" onClick={() => onConfirm(reference)}>
+            Confirm booking
+          </Button>
+        </div>
+      </div>
+    </DialogBookingConfirm>
+  );
+};

package/src/components/organisms/DialogBookingConfirm/BookingSuccess.tsx

@@ -0,0 +1,67 @@
+import { Button, Heading, Text } from '@/src';
+import React from 'react';
+import { DialogBookingConfirm } from './DialogBookingConfirm';
+
+export interface BookingSuccessProps {
+  /**
+   * Whether the dialog is open.
+   */
+  open: boolean;
+  /**
+   * The name of the booking.
+   */
+  bookingName: string;
+  /**
+   * The callback function to call when the dialog is closed.
+   */
+  setOpen: (open: boolean) => void;
+  /**
+   * The callback function to call when the next button is clicked.
+   */
+  onNext: () => void;
+}
+
+/**
+ * BookingSuccess is a component that allows the user to display the booking success.
+ *
+ * @example
+ * <BookingSuccess
+ *  open={open}
+ *  bookingName={bookingName}
+ *  setOpen={setOpen}
+ *  onNext={onNext}
+ * />
+ *
+ *
+ * @param props - The props for the BookingSuccess component.
+ * @returns The BookingSuccess component.
+ */
+export const BookingSuccess: React.FC<BookingSuccessProps> = (props) => {
+  const { open, bookingName, setOpen, onNext } = props;
+  return (
+    <DialogBookingConfirm open={open} setOpen={setOpen} className="!max-w-[800px]">
+      <div className="space-y-9">
+        <div className="space-y-8">
+          <img
+            src="/images/svg/booking-confirm.svg"
+            alt="Booking success"
+            className="mx-auto"
+            width={150}
+            height={150}
+          />
+          <div className="text-center">
+            <Heading as="p" level={6} variant="medium">
+              Your booking has been successfully confirmed!
+            </Heading>
+            <Text variant="bold" size="lg">
+              "{bookingName}"
+            </Text>
+          </div>
+        </div>
+        <Button variant="secondary" onClick={onNext} className="w-full">
+          Confirm booking
+        </Button>
+      </div>
+    </DialogBookingConfirm>
+  );
+};

package/src/components/organisms/DialogBookingConfirm/DialogBookingConfirm.tsx

@@ -1,14 +1,49 @@
 import React from 'react';
 import Dialog from '../Dialog/Dialog';
+import { BookingCancellationPolicy } from './BookingCancellationPolicy';
+import { BookingMailSent } from './BookingMailSent';
+import { BookingReference } from './BookingReference';
+import { BookingSuccess } from './BookingSuccess';
 
 interface DialogBookingConfirmProps {
+  /**
+   * Whether the dialog is open.
+   */
   open: boolean;
-  title: string;
+  /**
+   * The title of the dialog.
+   */
+  title?: string;
+  /**
+   * The children of the dialog.
+   */
   children: React.ReactNode;
+  /**
+   * The callback function to call when the dialog is closed.
+   */
   setOpen: (open: boolean) => void;
+  /**
+   * The class name of the dialog.
+   */
   className?: string;
 }
 
+/**
+ * DialogBookingConfirm is a component that allows the user to display the booking confirmation.
+ *
+ * @example
+ * <DialogBookingConfirm
+ *  open={open}
+ *  title={title}
+ *  children={children}
+ *  setOpen={setOpen}
+ *  className={className}
+ * />
+ *
+ *
+ * @param props - The props for the DialogBookingConfirm component.
+ * @returns The DialogBookingConfirm component.
+ */
 export const DialogBookingConfirm = (props: DialogBookingConfirmProps) => {
   const { open, title, children, setOpen, className } = props;
 
@@ -18,8 +53,14 @@ export const DialogBookingConfirm = (props: DialogBookingConfirmProps) => {
       onClose={() => setOpen(false)}
       title={title}
       className={className}
-      showFooter={false}>
+      showFooter={false}
+      closeOnOverlayClick={false}>
       {children}
     </Dialog>
   );
 };
+
+DialogBookingConfirm.Reference = BookingReference;
+DialogBookingConfirm.CancellationPolicy = BookingCancellationPolicy;
+DialogBookingConfirm.Success = BookingSuccess;
+DialogBookingConfirm.MailSent = BookingMailSent;

package/src/components/organisms/DialogBookingConfirm/index.ts

@@ -0,0 +1,6 @@
+export * from './DialogBookingConfirm';
+
+export type { BookingCancellationPolicyProps } from './BookingCancellationPolicy';
+export type { BookingMailSentProps } from './BookingMailSent';
+export type { BookingReferenceProps } from './BookingReference';
+export type { BookingSuccessProps } from './BookingSuccess';

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

@@ -5,14 +5,39 @@ import { Policy } from './PolicyAccom/PolicyAccom';
 import DetailsCancellationPolicy from './TabCancellationPolicy';
 
 export interface CancellationAccomProps extends HeaderAccomProps {
+  /**
+   * The image of the cancellation accommodation.
+   */
   image: string;
+  /**
+   * Whether the cancellation accommodation is on request.
+   */
   isOnRequest?: boolean;
+  /**
+   * The room policies of the cancellation accommodation.
+   */
   roomPolicies: Array<{
     roomName: string;
     policies: Policy[];
   }>;
 }
 
+/**
+ * CancellationAccom is a component that allows the user to display the cancellation accommodation.
+ *
+ * @example
+ * <CancellationAccom
+ *  hotelName="Hotel Name"
+ *  pax="8 pax"
+ *  dates={['2024-01-01', '2024-01-02']}
+ *  image="/images/accom.png"
+ *  roomPolicies={roomPolicies}
+ *  isOnRequest={false}
+ * />
+ *
+ * @param props - The props for the CancellationAccom component.
+ * @returns The CancellationAccom component.
+ */
 export default function CancellationAccom(props: CancellationAccomProps) {
   const { hotelName, pax, dates, image, roomPolicies, isOnRequest } = props;
   return (

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

@@ -3,6 +3,30 @@ import PolicyAccom from './PolicyAccom/PolicyAccom';
 import PolicyExcursion from './PolicyExcursion';
 import PolicyTransfer from './PolicyTransfer';
 
+/**
+ * CancellationBody is a component that allows the user to display the cancellation body.
+ *
+ * @example
+ * <CancellationBody>
+ *  <CancellationBody.Accom
+ *    roomName="Room Name"
+ *    policies={policies}
+ *  />
+ *  <CancellationBody.Excursion
+ *    name="Excursion Name"
+ *    date="2024-01-01"
+ *    pickUpPoint="Pick Up Point"
+ *    policies={policies}
+ *  />
+ *  <CancellationBody.Transfer
+ *    carName="Car Name"
+ *    transferData={transferData}
+ *  />
+ * </CancellationBody>
+ *
+ * @param props - The props for the CancellationBody component.
+ * @returns The CancellationBody component.
+ */
 export default function CancellationBody(props: React.PropsWithChildren) {
   return <div className="cancellation-body" {...props} />;
 }

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

@@ -3,13 +3,43 @@ import CancellationHeader from './CancellationHeader';
 import DetailsCancellationPolicy from './TabCancellationPolicy';
 
 export interface CancellationExcursionProps {
+  /**
+   * The name of the cancellation excursion.
+   */
   name: string;
+  /**
+   * The date of the cancellation excursion.
+   */
   date: string;
+  /**
+   * The image of the cancellation excursion.
+   */
   image: string;
+  /**
+   * The pick up point of the cancellation excursion.
+   */
   pickUpPoint: string;
+  /**
+   * The policies of the cancellation excursion.
+   */
   policies: string;
 }
 
+/**
+ * CancellationExcursion is a component that allows the user to display the cancellation excursion.
+ *
+ * @example
+ * <CancellationExcursion
+ *  name="Excursion Name"
+ *  date="2024-01-01"
+ *  image="/images/excursion.png"
+ *  pickUpPoint="Pick Up Point"
+ *  policies="Policies"
+ * />
+ *
+ * @param props - The props for the CancellationExcursion component.
+ * @returns The CancellationExcursion component.
+ */
 export default function CancellationExcursion(props: CancellationExcursionProps) {
   const { name, date, image, pickUpPoint, policies } = props;
   return (

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

@@ -2,6 +2,29 @@ import HeaderAccom from './HeaderAccom';
 import HeaderExcursion from './HeaderExcursion';
 import HeaderTransfer from './HeaderExcursion/HeaderTransfer';
 
+/**
+ * CancellationHeader is a component that allows the user to display the cancellation header.
+ *
+ * @example
+ * <CancellationHeader>
+ *  <CancellationHeader.Accom
+ *    hotelName="Hotel Name"
+ *    pax="8 pax"
+ *    dates={['2024-01-01', '2024-01-02']}
+ *  />
+ *  <CancellationHeader.Excursion
+ *    name="Excursion Name"
+ *    date="2024-01-01"
+ *  />
+ *  <CancellationHeader.Transfer
+ *    carName="Car Name"
+ *    transferData={transferData}
+ *  />
+ * </CancellationHeader>
+ *
+ * @param props - The props for the CancellationHeader component.
+ * @returns The CancellationHeader component.
+ */
 export default function CancellationHeader(props: React.PropsWithChildren) {
   return <div className="cancellation-header" {...props} />;
 }

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

@@ -4,10 +4,32 @@ import { TransferData } from './HeaderExcursion/HeaderTransfer';
 import DetailsCancellationPolicy from './TabCancellationPolicy';
 
 export interface CancellationTransferProps {
+  /**
+   * The image of the cancellation transfer.
+   */
   image: string;
+  /**
+   * The car name of the cancellation transfer.
+   */
   carName: string;
+  /**
+   * The transfer data of the cancellation transfer.
+   */
   transferData: TransferData[];
 }
+/**
+ * CancellationTransfer is a component that allows the user to display the cancellation transfer.
+ *
+ * @example
+ * <CancellationTransfer
+ *  image="/images/transfer.png"
+ *  carName="Car Name"
+ *  transferData={transferData}
+ * />
+ *
+ * @param props - The props for the CancellationTransfer component.
+ * @returns The CancellationTransfer component.
+ */
 export default function CancellationTransfer(props: CancellationTransferProps) {
   const { image, carName, transferData } = props;
   return (

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

@@ -4,11 +4,33 @@ import { ServiceTitle } from '../../molecules/ServiceTitle/ServiceTitle';
 import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
 
 export interface HeaderAccomProps {
+  /**
+   * The hotel name of the header accommodation.
+   */
   hotelName: string;
+  /**
+   * The pax of the header accommodation.
+   */
   pax: number | string;
+  /**
+   * The dates of the header accommodation.
+   */
   dates: string[];
 }
 
+/**
+ * HeaderAccom is a component that allows the user to display the header accommodation.
+ *
+ * @example
+ * <HeaderAccom
+ *  hotelName="Hotel Name"
+ *  pax="8 pax"
+ *  dates={['2024-01-01', '2024-01-02']}
+ * />
+ *
+ * @param props - The props for the HeaderAccom component.
+ * @returns
+ */
 export default function HeaderAccom(props: HeaderAccomProps) {
   const { hotelName, pax, dates } = props;
 

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

@@ -2,10 +2,28 @@ import { DateDisplay } from '../../molecules/DateDisplay/DateDisplay';
 import { ServiceTitle } from '../../molecules/ServiceTitle/ServiceTitle';
 
 export interface HeaderExcursionProps {
+  /**
+   * The name of the header excursion.
+   */
   name: string;
+  /**
+   * The date of the header excursion.
+   */
   date: string;
 }
 
+/**
+ * HeaderExcursion is a component that allows the user to display the header excursion.
+ *
+ * @example
+ * <HeaderExcursion
+ *  name="Excursion Name"
+ *  date="2024-01-01"
+ * />
+ *
+ * @param props - The props for the HeaderExcursion component.
+ * @returns The HeaderExcursion component.
+ */
 export default function HeaderExcursion(props: HeaderExcursionProps) {
   const { name, date } = props;
 

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

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

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

@@ -1,3 +1,4 @@
+import Chip from '@/src/components/atoms/Chip/Chip';
 import { Fragment } from 'react';
 import { Text } from '../../../atoms/Typography/Typography';
 import { DateDisplay } from '../../../molecules/DateDisplay/DateDisplay';
@@ -28,10 +29,10 @@ export default function PolicyAccom(props: PolicyAccomProps) {
       </div>
       {policies.map((policy, index) => (
         <Fragment key={`policy-${index}`}>
-          <Text size="xs" variant="medium" leading="4" className="policy-accom__period">
+          <Chip type="outline" color="brand" isBlackText>
             Policy period applies{' '}
             <DateDisplay dates={[policy.ValidFrom, policy.ValidTo]} textSize="xs" />
-          </Text>
+          </Chip>
           <div className="space-y-2">
             <Text variant="bold" size="xs" leading="4">
               {policy.Value} % of total price

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

@@ -1,10 +1,28 @@
 import { Text } from '../../atoms/Typography/Typography';
 
 export interface PolicyExcursionProps {
+  /**
+   * The pick up point of the policy excursion.
+   */
   pickUpPoint: string;
+  /**
+   * The policies of the policy excursion.
+   */
   policies: string;
 }
 
+/**
+ * PolicyExcursion is a component that allows the user to display the policy excursion.
+ *
+ * @example
+ * <PolicyExcursion
+ *  pickUpPoint="Pick Up Point"
+ *  policies="Policies"
+ * />
+ *
+ * @param props - The props for the PolicyExcursion component.
+ * @returns
+ */
 export default function PolicyExcursion(props: PolicyExcursionProps) {
   const { pickUpPoint, policies } = props;
 

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

@@ -33,6 +33,17 @@ const policies = [
   },
 ];
 
+/**
+ * PolicyTransfer is a component that allows the user to display the policy transfer.
+ *
+ * @example
+ * <PolicyTransfer
+ *  carName="Car Name"
+ * />
+ *
+ * @param props - The props for the PolicyTransfer component.
+ * @returns
+ */
 export default function PolicyTransfer(props: PolicyTransferProps) {
   const { carName } = props;
 

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

@@ -3,6 +3,35 @@ import CancellationExcursion from './CancellationExcursion';
 import CancellationTransfer from './CancellationTransfer';
 import TabCancellationPolicyLayout from './TabCancellationPolicyLayout/TabCancellationPolicyLayout';
 
+/**
+ * TabCancellationPolicy is a component that allows the user to display the tab cancellation policy.
+ *
+ * @example
+ * <TabCancellationPolicy>
+ *  <TabCancellationPolicy.Accom
+ *    hotelName="Hotel Name"
+ *    pax="8 pax"
+ *    dates={['2024-01-01', '2024-01-02']}
+ *    image="/images/accom.png"
+ *    roomPolicies={roomPolicies}
+ *    isOnRequest={false}
+ *  />
+ *  <TabCancellationPolicy.Excursion
+ *    name="Excursion Name"
+ *    date="2024-01-01"
+ *    image="/images/excursion.png"
+ *    pickUpPoint="Pick Up Point"
+ *    policies="Policies"
+ *  />
+ *  <TabCancellationPolicy.Transfer
+ *    carName="Car Name"
+ *    transferData={transferData}
+ *  />
+ * </TabCancellationPolicy>
+ *
+ * @param props - The props for the TabCancellationPolicy component.
+ * @returns The TabCancellationPolicy component.
+ */
 export default function TabCancellationPolicy(props: React.PropsWithChildren) {
   return <div className="tab-cancellation-policy" {...props} />;
 }

package/src/styles/components/checkbox.css

@@ -18,13 +18,17 @@
 .checkbox-label {
   display: flex;
   align-items: center;
-  column-gap: var(--checkbox-spacing-inline-gap, var(--multiselect-spacing-option-icon-gap, 0.625rem));
+  column-gap: var(
+    --checkbox-spacing-inline-gap,
+    var(--multiselect-spacing-option-icon-gap, 0.625rem)
+  );
   cursor: pointer;
   user-select: none;
   width: 100%;
   padding: var(--checkbox-spacing-label-padding, 0.5rem 0.75rem);
   border-radius: var(--checkbox-border-radius, 0.375rem);
-  transition: all var(--checkbox-transition-duration, 0.2s) var(--checkbox-transition-timing, ease-in-out);
+  transition: all var(--checkbox-transition-duration, 0.2s)
+    var(--checkbox-transition-timing, ease-in-out);
 }
 
 .checkbox-box {
@@ -40,7 +44,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--checkbox-transition-duration, 0.2s) var(--checkbox-transition-timing, ease-in-out);
+  transition: all var(--checkbox-transition-duration, 0.2s)
+    var(--checkbox-transition-timing, ease-in-out);
   flex-shrink: 0;
 }
 
@@ -50,7 +55,8 @@
   font-size: var(--checkbox-typography-fontSize, 0.875rem);
   line-height: var(--checkbox-typography-lineHeight, 1.25rem);
   color: var(--color-gray-900);
-  transition: color var(--checkbox-transition-duration, 0.2s) var(--checkbox-transition-timing, ease-in-out);
+  transition: color var(--checkbox-transition-duration, 0.2s)
+    var(--checkbox-transition-timing, ease-in-out);
 }
 
 .checkbox-leading {
@@ -77,7 +83,7 @@
 
 .checkbox--checked .checkbox-box {
   background-color: var(--color-transparent);
-  border-color: var(--checkbox-border-radius, 0.125rem);
+  border-color: var(--color-atoll-green-800);
 }
 
 .checkbox--checked .checkbox-label {

package/dist/components/ui/checkbox.d.ts

@@ -1,4 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import * as React from 'react';
-declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-export { Checkbox };

package/dist/components/ui/checkbox.js

@@ -1,31 +0,0 @@
-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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { cn } from '@/src/lib/utils';
-import Icon from '../atoms/Icon/Icon';
-function Checkbox(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(CheckboxPrimitive.Root, __assign({ "data-slot": "checkbox", className: cn('w-5 h-5 border border-[var(--checkbox-color-checkbox-border-default-default)] data-[state=checked]:border-[var(--checkbox-color-checkbox-border-selected-default)] rounded-[var(--border-radius-rounded-sm)] data-[error=true]:border-[var(--checkbox-color-checkbox-border-default-error)] data-[error=true]:bg-[var(--checkbox-color-checkbox-background-error)] disabled:opacity-50 disabled:cursor-not-allowed', className) }, props, { children: _jsx(CheckboxPrimitive.Indicator, __assign({ "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none" }, { children: _jsx(Icon, { name: "check", size: "sm", className: "text-[var(--checkbox-color-checkbox-checked-default)]" }) })) })));
-}
-export { Checkbox };