mautourco-components 0.2.21 → 0.2.22

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

@@ -3,6 +3,35 @@ import CancellationAccom from './CancellationAccom';
 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.
+ */
 declare function TabCancellationPolicy(props: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
 declare namespace TabCancellationPolicy {
     var Layout: typeof TabCancellationPolicyLayout;

package/dist/components/organisms/TabCancellationPolicy/TabCancellationPolicy.js

@@ -14,6 +14,35 @@ import CancellationAccom from './CancellationAccom';
 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) {
     return _jsx("div", __assign({ className: "tab-cancellation-policy" }, props));
 }

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export { default as CalendarInput } from './components/molecules/Calendar/CalendarInput';
 export { default as TimePicker } from './components/molecules/Calendar/TimePicker';
 export * from './components/molecules/DetailsInfo';
+export * from './components/molecules/DialogContentPolicy';
 export { default as FeatureRow } from './components/molecules/FeatureRow/FeatureRow';
 export { default as FromTo } from './components/molecules/FromTo/FromTo';
 export { default as LocationDropdown } from './components/molecules/LocationDropdown/LocationDropdown';
@@ -42,6 +43,7 @@ export { default as CarBookingCard } from './components/organisms/CarBookingCard
 export { CardContainer } from './components/organisms/CardContainer/CardContainer';
 export { default as DateTimePicker } from './components/organisms/DateTimePicker/DateTimePicker';
 export { Dialog } from './components/organisms/Dialog/Dialog';
+export * from './components/organisms/DialogBookingConfirm';
 export { Footer } from './components/organisms/Footer/Footer';
 export { default as MultipleQuotationDocket } from './components/organisms/MultipleQuotationDocket';
 export { default as PaxSelector } from './components/organisms/PaxSelector/PaxSelector';
@@ -81,6 +83,8 @@ export type { RoundTripData, RoundTripProps, RoundTripTransfer, } from './compon
 export type { SearchBarTransferData, SearchBarTransferProps, TransferMode, } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
 export type { TopNavigationProps } from './components/organisms/TopNavigation/TopNavigation';
 export type { TransferLineData, TransferLineProps, TransferType, } from './components/organisms/TransferLine/TransferLine';
+export type { CheckboxProps } from './components/atoms/Checkbox/Checkbox';
+export type { InputProps } from './components/atoms/Inputs/Input/Input';
 export type { BreadcrumbsItem, BreadcrumbsProps, } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export type { FromToProps } from './components/molecules/FromTo/FromTo';
 export type { SectionTitleProps } from './components/molecules/SectionTitle/SectionTitle';

package/dist/index.js

@@ -22,6 +22,7 @@ export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export { default as CalendarInput } from './components/molecules/Calendar/CalendarInput';
 export { default as TimePicker } from './components/molecules/Calendar/TimePicker';
 export * from './components/molecules/DetailsInfo';
+export * from './components/molecules/DialogContentPolicy';
 export { default as FeatureRow } from './components/molecules/FeatureRow/FeatureRow';
 export { default as FromTo } from './components/molecules/FromTo/FromTo';
 export { default as LocationDropdown } from './components/molecules/LocationDropdown/LocationDropdown';
@@ -45,6 +46,7 @@ export { default as CarBookingCard } from './components/organisms/CarBookingCard
 export { CardContainer } from './components/organisms/CardContainer/CardContainer';
 export { default as DateTimePicker } from './components/organisms/DateTimePicker/DateTimePicker';
 export { Dialog } from './components/organisms/Dialog/Dialog';
+export * from './components/organisms/DialogBookingConfirm';
 export { Footer } from './components/organisms/Footer/Footer';
 export { default as MultipleQuotationDocket } from './components/organisms/MultipleQuotationDocket';
 export { default as PaxSelector } from './components/organisms/PaxSelector/PaxSelector';
@@ -71,5 +73,3 @@ export { default as SearchIcon } from './components/atoms/Icon/icons/Search';
 export { default as SettingsIcon } from './components/atoms/Icon/icons/Settings';
 export { default as UserIcon } from './components/atoms/Icon/icons/User';
 export * from './types/table';
-// export type { InputProps } from './components/atoms/Inputs/Input/Input';
-// export type { CheckboxProps } from './components/atoms/Checkbox/Checkbox';

package/dist/styles/components/checkbox.css

@@ -2095,14 +2095,18 @@
 .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;
   -webkit-user-select: none;
           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 {
@@ -2118,7 +2122,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;
 }
 
@@ -2128,7 +2133,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 {
@@ -2156,7 +2162,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "private": false,
   "description": "Bibliothèque de composants Motorco pour le redesign",
   "main": "dist/index.js",
@@ -25,7 +25,6 @@
     "motorco"
   ],
   "dependencies": {
-    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",

package/src/components/atoms/Checkbox/Checkbox.tsx

@@ -1,15 +1,17 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Check from '../Icon/icons/Check';
+import { Text } from '../Typography/Typography';
 
-interface CheckboxProps {
+export interface CheckboxProps {
   checked?: boolean;
   disabled?: boolean;
   error?: boolean;
   label?: string;
-  onChange?: (checked: boolean) => void;
   className?: string;
   id?: string;
   leadingContent?: React.ReactNode;
+  labelPosition?: 'leading' | 'trailing';
+  onChange?: (checked: boolean) => void;
 }
 
 const Checkbox: React.FC<CheckboxProps> = ({
@@ -20,61 +22,74 @@ const Checkbox: React.FC<CheckboxProps> = ({
   onChange,
   className = '',
   id,
-  leadingContent
+  leadingContent,
+  labelPosition = 'trailing',
 }) => {
+  const [isChecked, setIsChecked] = useState(false);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!disabled && onChange) {
-      onChange(e.target.checked);
+    if (!disabled) {
+      setIsChecked(e.target.checked);
     }
+    onChange?.(e.target.checked);
   };
 
   const handleLabelClick = (e: React.MouseEvent<HTMLLabelElement>) => {
     if (!disabled && onChange) {
       e.preventDefault();
-      onChange(!checked);
+      onChange(!isChecked);
     }
   };
 
   const getStateClasses = () => {
     if (disabled) return 'checkbox--disabled';
     if (error) return 'checkbox--error';
-    if (checked) return 'checkbox--checked';
+    if (isChecked) return 'checkbox--checked';
     return 'checkbox--default';
   };
 
   const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
 
+  useEffect(() => {
+    setIsChecked(checked);
+  }, [checked]);
+
+  const renderLabel = () => {
+    return (
+      label && (
+        <Text
+          as="span"
+          size="sm"
+          variant="medium"
+          color={error ? 'state-error' : 'default'}>
+          {label}
+        </Text>
+      )
+    );
+  };
+
   return (
     <div className={`checkbox-container ${getStateClasses()} ${className}`}>
-      <label 
-        htmlFor={checkboxId} 
-        className="checkbox-label"
-        onClick={handleLabelClick}
-      >
+      <label htmlFor={checkboxId} className="checkbox-label" onClick={handleLabelClick}>
         <input
           type="checkbox"
           id={checkboxId}
-          checked={checked}
+          checked={isChecked}
           disabled={disabled}
           onChange={handleChange}
           className="checkbox-input"
           readOnly
         />
+        {labelPosition === 'leading' && renderLabel()}
         <div className="checkbox-button">
           <div className="checkbox-touch-target">
             <div className="checkbox-box">
-              {checked && (
-                <Check size="sm" className="checkbox-icon" />
-              )}
+              {isChecked && <Check size="sm" className="checkbox-icon" />}
             </div>
           </div>
         </div>
-        {leadingContent && (
-          <span className="checkbox-leading">{leadingContent}</span>
-        )}
-        {label && (
-          <span className="checkbox-text">{label}</span>
-        )}
+        {leadingContent && <span className="checkbox-leading">{leadingContent}</span>}
+        {labelPosition === 'trailing' && renderLabel()}
       </label>
     </div>
   );

package/src/components/atoms/Inputs/Input/Input.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Icon, { IconName } from '../../Icon/Icon';
 
-interface InputProps {
+export interface InputProps {
   variant?: 'default' | 'focus' | 'success' | 'error' | 'disabled';
   placeholder?: string;
   value?: string;

package/src/components/molecules/BookingPax/BookingPax.tsx

@@ -3,6 +3,49 @@ import { BookingPaxAccom } from './BookingPaxAccom';
 import { BookingPaxExcursion } from './BookingPaxExcursion';
 import { BookingPaxTransfer } from './BookingPaxTransfer';
 
+/**
+ * BookingPax is a component that allows the user to display the booking pax.
+ *
+ * @example
+ * <BookingPax>
+ *  <BookingPax.Accom
+ *    name="Hotel Name"
+ *    type="hotel"
+ *    clientsInfo={clientsInfo}
+ *    paxCount={1}
+ *    selectedClientsInfoIds={selectedClientsInfoIds}
+ *    isSubmitted={false}
+ *    onPaxChange={onPaxChange}
+ *    onRemarkChange={onRemarkChange}
+ *    onError={onError}
+ *  />
+ *  <BookingPax.Excursion
+ *    name="Excursion Name"
+ *    type="sea"
+ *    clientsInfo={clientsInfo}
+ *    paxCount={1}
+ *    selectedClientsInfoIds={selectedClientsInfoIds}
+ *    isSubmitted={false}
+ *    onPaxChange={onPaxChange}
+ *    onRemarkChange={onRemarkChange}
+ *    onError={onError}
+ *  />
+ *  <BookingPax.Transfer
+ *    name="Transfer Name"
+ *    type="transfer"
+ *    clientsInfo={clientsInfo}
+ *    paxCount={1}
+ *    selectedClientsInfoIds={selectedClientsInfoIds}
+ *    isSubmitted={false}
+ *    onPaxChange={onPaxChange}
+ *    onRemarkChange={onRemarkChange}
+ *    onError={onError}
+ *  />
+ * </BookingPax>
+ *
+ * @param props - The props for the BookingPax component.
+ * @returns The BookingPax component.
+ */
 export const BookingPax = (props: React.PropsWithChildren) => {
   return <div className="booking-pax space-y-6" {...props} />;
 };

package/src/components/molecules/BookingPax/BookingPaxAccom.tsx

@@ -11,16 +11,50 @@ import { BookingPaxLayout } from './BookingPaxLayout/BookingPaxLayout';
 import { BookingPaxRemarks } from './BookingPaxRemarks';
 
 export interface BookingPaxAccomRoom {
+  /**
+   * The pax count of the room.
+   */
   paxCount: number;
 }
 
 export interface RoomData {
+  /**
+   * The room of the room data.
+   */
   room: BookingPaxAccomRoom;
+  /**
+   * The room index of the room data.
+   */
   roomIndex: number;
+  /**
+   * The selected count of the room data.
+   */
   selectedCount: number;
+  /**
+   * Whether the pax count is error.
+   */
   isPaxCountError: boolean;
 }
 
+/**
+ * BookingPaxAccomProps is the props for the BookingPaxAccom component.
+ *
+ * @example
+ * <BookingPaxAccom
+ *  rooms={rooms}
+ *  clientsInfo={clientsInfo}
+ *  hotelName="Hotel Name"
+ *  roomName="Room Name"
+ *  selectedClientsInfoIds={selectedClientsInfoIds}
+ *  isSubmitted={false}
+ *  onPaxChange={onPaxChange}
+ *  onRemarkChange={onRemarkChange}
+ *  onError={onError}
+ * />
+ *
+ * @param props - The props for the BookingPaxAccom component.
+ * @returns The BookingPaxAccom component.
+ */
 export interface BookingPaxAccomProps extends Pick<
   BookingPaxClientProps,
   'selectedClientsInfoIds' | 'onPaxChange'

package/src/components/molecules/BookingPax/BookingPaxClient/BookingPaxClient.css

@@ -1,4 +1,10 @@
 .booking-pax-client {
   @apply grid gap-x-4 gap-y-2;
   @apply lg:grid-cols-2;
+  .checkbox-container {
+    label {
+      padding: 0;
+      background-color: transparent;
+    }
+  }
 }

package/src/components/molecules/BookingPax/BookingPaxClient/BookingPaxClient.tsx

@@ -1,41 +1,128 @@
+import Checkbox, { CheckboxProps } from '@/src/components/atoms/Checkbox/Checkbox';
 import { Text } from '@/src/components/atoms/Typography/Typography';
-import { Checkbox } from '@/src/components/ui/checkbox';
 import useBookingPax from '@/src/hooks/useBookingPax';
 import { cn } from '@/src/lib/utils';
-import { CheckboxProps } from '@radix-ui/react-checkbox';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import './BookingPaxClient.css';
 
 export interface BookingPaxClientInfo {
+  /**
+   * The first name of the client.
+   */
   firstName: string;
+  /**
+   * The last name of the client.
+   */
   lastName: string;
+  /**
+   * The age of the client.
+   */
   age: number;
+  /**
+   * The client type.
+   */
   clientType: 'Adult' | 'Teen' | 'Child' | 'Infant';
+  /**
+   * The client id.
+   */
   clientId: string;
 }
 
 export interface BookingPaxClientOptions {
+  /**
+   * The client id.
+   */
   clientId: string;
+  /**
+   * Whether the client is checked.
+   */
   checked: CheckboxProps['checked'];
+  /**
+   * The selected index.
+   */
   selectedIndex: number;
+  /**
+   * The selected pax index.
+   */
   selectedPaxIndex?: number;
+  /**
+   * The pax count.
+   */
   paxCount?: number;
+  /**
+   * The selected clients info ids.
+   */
   selectedClientsInfoIds?: Record<string | number, string[]>;
+  /**
+   * The selected clients.
+   */
   selectedClients?: Record<string | number, BookingPaxClientInfo[]>;
 }
 
 export interface BookingPaxClientProps {
+  /**
+   * The clients to select from.
+   */
   clients: BookingPaxClientInfo[];
+  /**
+   * The id of the booking pax client.
+   */
   id: string;
+  /**
+   * The selected clients info ids.
+   */
   selectedClientsInfoIds?: Record<string | number, string[]>;
+  /**
+   * The selected index.
+   */
   selectedIndex: number;
+  /**
+   * The selected pax index.
+   */
   selectedPaxIndex?: number;
+  /**
+   * The pax count.
+   */
   paxCount?: number;
+  /**
+   * Whether the form has been submitted.
+   */
   isSubmitted?: boolean;
+  /**
+   * The callback function to call when the pax changes.
+   */
   onPaxChange?: (options: BookingPaxClientOptions) => void;
+  /**
+   * The callback function to call when the error changes.
+   */
   onError?: (hasError: boolean) => void;
 }
 
+/**
+ * BookingPaxClient is a component that allows the user to select the pax for a booking.
+ *
+ * @example
+ * <BookingPaxClient
+ *  clients={clients}
+ *  id="booking-pax-client"
+ *  selectedClientsInfoIds={selectedClientsInfoIds}
+ *  selectedIndex={0}
+ *  paxCount={1}
+ *  isSubmitted={false}
+ *  onPaxChange={onPaxChange}
+ *  onError={onError}
+ * />
+ *
+ * @param props - The props for the BookingPaxClient component.
+ * @param props.clients - The clients to select from.
+ * @param props.id - The id of the booking pax client.
+ * @param props.selectedClientsInfoIds - The selected clients info ids.
+ * @param props.selectedIndex - The selected index.
+ * @param props.paxCount - The pax count.
+ * @param props.isSubmitted - Whether the form has been submitted.
+ * @param props.onPaxChange - The callback function to call when the pax changes.
+ * @returns The BookingPaxClient component.
+ */
 export const BookingPaxClient: React.FC<BookingPaxClientProps> = (props) => {
   const {
     clients,
@@ -151,11 +238,12 @@ export const BookingPaxClient: React.FC<BookingPaxClientProps> = (props) => {
             <div key={client.clientId}>
               <div className="flex items-center gap-x-2">
                 <Checkbox
-                  data-error={showError}
                   id={`pc-${id}-${selectedIndex}-${client.clientId}`}
                   checked={isSelected || clients.length === paxCount}
                   disabled={clients.length === paxCount}
-                  onCheckedChange={(checked) => {
+                  error={showError}
+                  label={`${client.firstName} ${client.lastName} (${client.clientType}${client.clientType !== 'Adult' ? ` - ${client.age} years old` : ''})`}
+                  onChange={(checked) => {
                     handlePaxChange({
                       clientId: client.clientId,
                       checked,
@@ -164,20 +252,6 @@ export const BookingPaxClient: React.FC<BookingPaxClientProps> = (props) => {
                     });
                   }}
                 />
-                <label
-                  htmlFor={`pc-${id}-${selectedIndex}-${client.clientId}`}
-                  className={cn('cursor-pointer', {
-                    'pointer-events-none': clients.length === paxCount,
-                  })}>
-                  <Text
-                    size="sm"
-                    leading="4"
-                    as="span"
-                    color={showError ? 'state-error' : undefined}>
-                    {client.firstName} {client.lastName} ({client.clientType}
-                    {client.clientType !== 'Adult' && ` - ${client.age} years old`})
-                  </Text>
-                </label>
               </div>
             </div>
           );

package/src/components/molecules/BookingPax/BookingPaxExcursion.tsx

@@ -15,13 +15,37 @@ export interface BookingPaxExcursionProps extends Pick<
   BookingPaxClientProps,
   'selectedClientsInfoIds' | 'onPaxChange'
 > {
+  /**
+   * The clients info of the booking pax excursion.
+   */
   clientsInfo: BookingPaxClientInfo[];
+  /**
+   * The name of the booking pax excursion.
+   */
   name: string;
+  /**
+   * The type of the booking pax excursion.
+   */
   type: ExcursionType;
+  /**
+   * Whether the booking pax excursion is submitted.
+   */
   isSubmitted?: boolean;
+  /**
+   * The pax count of the booking pax excursion.
+   */
   paxCount: number;
+  /**
+   * The max pax count of the booking pax excursion.
+   */
   maxPaxCount?: number;
+  /**
+   * The callback function to call when the remark changes.
+   */
   onRemarkChange?: (value: string) => void;
+  /**
+   * The callback function to call when the error changes.
+   */
   onError?: (hasError: boolean) => void;
 }
 
@@ -31,6 +55,25 @@ const mapType: Record<BookingPaxExcursionProps['type'], string> = {
   catamaran: 'Cruise excursion',
 };
 
+/**
+ * BookingPaxExcursion is a component that allows the user to display the booking pax excursion.
+ *
+ * @example
+ * <BookingPaxExcursion
+ *  name="Excursion Name"
+ *  type="sea"
+ *  clientsInfo={clientsInfo}
+ *  paxCount={1}
+ *  selectedClientsInfoIds={selectedClientsInfoIds}
+ *  isSubmitted={false}
+ *  onPaxChange={onPaxChange}
+ *  onRemarkChange={onRemarkChange}
+ *  onError={onError}
+ * />
+ *
+ * @param props - The props for the BookingPaxExcursion component.
+ * @returns The BookingPaxExcursion component.
+ */
 export const BookingPaxExcursion: React.FC<BookingPaxExcursionProps> = (props) => {
   const {
     name,