mautourco-components 0.2.16 → 0.2.18

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

@@ -0,0 +1,47 @@
+import { Fragment } from 'react';
+import { Text } from '../../../atoms/Typography/Typography';
+import { DateDisplay } from '../../../molecules/DateDisplay/DateDisplay';
+import TextWithIcon from '../../../molecules/TextWithIcon/TextWithIcon';
+import './PolicyAccom.css';
+
+export interface Policy {
+  Description: string;
+  Value: number;
+  ValidFrom: string;
+  ValidTo: string;
+}
+
+export interface PolicyAccomProps {
+  roomName: string;
+  policies: Policy[];
+  index?: number;
+}
+
+export default function PolicyAccom(props: PolicyAccomProps) {
+  const { roomName, policies, index } = props;
+
+  return (
+    <div className="policy-accom">
+      <div className="grid gap-y-1">
+        <TextWithIcon icon="accom">Room {index !== undefined && index + 1}</TextWithIcon>
+        <Text size="sm">{roomName}</Text>
+      </div>
+      {policies.map((policy, index) => (
+        <Fragment key={`policy-${index}`}>
+          <Text size="xs" variant="medium" leading="4" className="policy-accom__period">
+            Policy period applies{' '}
+            <DateDisplay dates={[policy.ValidFrom, policy.ValidTo]} textSize="xs" />
+          </Text>
+          <div className="space-y-2">
+            <Text variant="bold" size="xs" leading="4">
+              {policy.Value} % of total price
+            </Text>
+            <Text size="xs" leading="4">
+              {policy.Description}
+            </Text>
+          </div>
+        </Fragment>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { Text } from '../../atoms/Typography/Typography';
+
+export interface PolicyExcursionProps {
+  pickUpPoint: string;
+  policies: string;
+}
+
+export default function PolicyExcursion(props: PolicyExcursionProps) {
+  const { pickUpPoint, policies } = props;
+
+  return (
+    <div className="policy-excursion space-y-6">
+      <div className="space-y-2">
+        <Text variant="bold" size="xs" leading="4">
+          Pick-up point:
+        </Text>
+        <Text size="xs" leading="4">
+          {pickUpPoint}
+        </Text>
+      </div>
+      <Text size="xs" leading="4">
+        {policies}
+      </Text>
+    </div>
+  );
+}

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

@@ -0,0 +1,62 @@
+import { Text } from '../../atoms/Typography/Typography';
+import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
+
+export interface PolicyTransferProps {
+  carName: string;
+}
+
+const policies = [
+  {
+    title: 'No Show',
+    policy: '100% of applicable fees will be claimed to the Operator',
+  },
+  {
+    title: 'No Show on expected flight and arrives later on another flight',
+    policy:
+      'An additional no show fee of 50% will be charged on normal fee payable by the Operator',
+  },
+  {
+    title: 'Delayed client due to flight amendment without prior notice (4 hours before)',
+    policy: '100% payable by the Operator',
+  },
+  {
+    title: 'Walk-in client (without booking/voucher)',
+    policy: 'Taxi Transfer will be provided to the client at his own expense',
+  },
+  {
+    title: 'Unexpected client (with voucher but without booking)',
+    policy: 'Private transfer will be charged to the Operator',
+  },
+  {
+    title: 'Cancellation less than 24 hours prior arrival',
+    policy: '100% applicable fee claimed to the Operator',
+  },
+];
+
+export default function PolicyTransfer(props: PolicyTransferProps) {
+  const { carName } = props;
+
+  return (
+    <div className="policy-excursion">
+      <TextWithIcon icon="car" textVariant="bold" iconSize="md" textSize="md">
+        {carName}
+      </TextWithIcon>
+      <div className="grid grid-cols-2 xl:grid-cols-3 gap-x-4">
+        {policies.map((policy, index) => (
+          <div key={`policy-${index}`} className="mt-4">
+            <Text variant="medium" size="sm" leading="4">
+              {policy.title}
+            </Text>
+            <ul className="pl-8">
+              <li className="list-disc">
+                <Text size="sm" leading="4">
+                  {policy.policy}
+                </Text>
+              </li>
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,13 @@
+import CancellationAccom from './CancellationAccom';
+import CancellationExcursion from './CancellationExcursion';
+import CancellationTransfer from './CancellationTransfer';
+import TabCancellationPolicyLayout from './TabCancellationPolicyLayout/TabCancellationPolicyLayout';
+
+export default function TabCancellationPolicy(props: React.PropsWithChildren) {
+  return <div className="tab-cancellation-policy" {...props} />;
+}
+
+TabCancellationPolicy.Layout = TabCancellationPolicyLayout;
+TabCancellationPolicy.Accom = CancellationAccom;
+TabCancellationPolicy.Excursion = CancellationExcursion;
+TabCancellationPolicy.Transfer = CancellationTransfer;

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

@@ -0,0 +1,46 @@
+.details-cancellation-policy__layout {
+  @apply grid gap-y-8;
+}
+
+.details-cancellation-policy__layout-flex {
+  @apply flex gap-x-8;
+  figure {
+    @apply overflow-hidden;
+    flex: 0 0 300px;
+    height: 300px;
+    border-radius: var(--border-radius-rounded-2xl);
+    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.19);
+    @media (min-width: 1280px) {
+      flex: 0 0 400px;
+      height: 400px;
+    }
+  }
+  img {
+    object-fit: cover;
+  }
+}
+
+.details-cancellation-policy__layout-content {
+  @apply flex-1;
+}
+
+.details-cancellation-policy__layout-content-header {
+  @apply pb-6 relative;
+  &::after {
+    content: '';
+    @apply absolute bottom-0 left-0 right-0;
+    height: 1px;
+    background-color: transparent;
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--divider-color-default) 0,
+      var(--divider-color-default) 8px,
+      transparent 8px,
+      transparent 16px
+    );
+  }
+}
+
+.details-cancellation-policy__layout-content-body {
+  @apply pt-6;
+}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import Chip from '../../../atoms/Chip/Chip';
+import { IconName } from '../../../atoms/Icon/Icon';
+import TextWithIcon from '../../../molecules/TextWithIcon/TextWithIcon';
+import './TabCancellationPolicyLayout.css';
+
+interface TabCancellationPolicyLayoutProps {
+  title: string;
+  icon: IconName;
+  isOnRequest?: boolean;
+  children: React.ReactNode;
+  image: string;
+  header: React.ReactNode;
+}
+
+export default function TabCancellationPolicyLayout(
+  props: TabCancellationPolicyLayoutProps
+) {
+  const { title, icon, isOnRequest, children, image, header } = props;
+  return (
+    <div className="details-cancellation-policy__layout">
+      <TextWithIcon
+        icon={icon}
+        color={isOnRequest ? 'yellow' : 'accent'}
+        textVariant="bold">
+        {title}
+        {isOnRequest && <Chip color="yellow">On request</Chip>}
+      </TextWithIcon>
+      <div className="details-cancellation-policy__layout-flex">
+        <figure>
+          <img src={image} alt={title} width={400} height={400} />
+        </figure>
+        <div className="details-cancellation-policy__layout-content">
+          <div className="details-cancellation-policy__layout-content-header">
+            {header}
+          </div>
+          <div className="details-cancellation-policy__layout-content-body">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+export * from './CancellationBody';
+export * from './CancellationHeader';
+export * from './TabCancellationPolicy';
+
+export type { CancellationAccomProps } from './CancellationAccom';
+export type { CancellationExcursionProps } from './CancellationExcursion';
+export type { CancellationTransferProps } from './CancellationTransfer';

package/src/components/organisms/TabServiceDetails/Accommodation.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { DetailsContentAccom, DetailsContentAccomProps } from './DetailsContentAccom';
+import TabServiceDetails from './TabServiceDetails';
+
+export interface AccommodationProps extends DetailsContentAccomProps {
+  /** Images of the accommodation */
+  images: string[];
+  /** Whether the accommodation is on request */
+  isOnRequest?: boolean;
+}
+
+/**
+ * Accommodation details tab  .
+ *
+ * @example
+ * <Accommodation
+ *   title="Accommodation"
+ *   icon="accom"
+ *   images={['image1.jpg', 'image2.jpg', 'image3.jpg']}
+ *   mobileContent={<div>Mobile content</div>}
+ *   isOnRequest={true}
+ * >
+ *   <div>Content</div>
+ * </Accommodation.Layout>
+ *
+ * @param props - Props of the Accommodation component
+ * @returns The Accommodation component
+ */
+export const Accommodation: React.FC<AccommodationProps> = (props) => {
+  const { images, isOnRequest, ...rest } = props;
+  return (
+    <TabServiceDetails.Layout
+      title="Accommodation"
+      icon="accom"
+      isOnRequest={isOnRequest}
+      images={images}
+      mobileContent={
+        <div className="mt-8">
+          <DetailsContentAccom.Body {...rest} />
+        </div>
+      }>
+      <DetailsContentAccom {...rest} />
+    </TabServiceDetails.Layout>
+  );
+};

package/src/components/organisms/TabServiceDetails/DetailContentTransfer.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Chip from '../../atoms/Chip/Chip';
+
+export interface DetailContentTransferProps {
+  pax: string;
+  clientType: string;
+  carName: string;
+  airConditioning?: boolean;
+  luggageTruck?: number;
+}
+
+export const DetailContentTransfer: React.FC<DetailContentTransferProps> = (props) => {
+  const { pax, clientType, carName, airConditioning, luggageTruck } = props;
+  return (
+    <div className="flex gap-4">
+      <Chip type="outline" color="brand" label={pax} leadingIcon="user" isBlackText />
+      <Chip
+        type="outline"
+        color="brand"
+        label={`Client type: ${clientType}`}
+        leadingIcon="user"
+        isBlackText
+      />
+      <Chip type="outline" color="brand" label={carName} leadingIcon="car" isBlackText />
+      {airConditioning && (
+        <Chip
+          type="outline"
+          color="brand"
+          label="Air conditioning"
+          leadingIcon="air"
+          isBlackText
+        />
+      )}
+      {luggageTruck && (
+        <Chip
+          type="outline"
+          color="brand"
+          label={`Luggage truck: ${luggageTruck > 1 ? `x${luggageTruck}` : luggageTruck}`}
+          leadingIcon="luggage"
+          isBlackText
+        />
+      )}
+    </div>
+  );
+};

package/src/components/organisms/TabServiceDetails/DetailsContentAccom.tsx

@@ -0,0 +1,124 @@
+import { useMobile } from '@/src/hooks/useMobile';
+import CardServiceAccom from '../../atoms/CardServiceAccom/CardServiceAccom';
+import Chip from '../../atoms/Chip/Chip';
+import { Text } from '../../atoms/Typography/Typography';
+import {
+  GlobalAmenities,
+  GlobalAmenity,
+} from '../../molecules/GlobalAmenities/GlobalAmenities';
+import { TextWithBorderBottom } from '../../molecules/TextWithBorderBottom/TextWithBorderBottom';
+import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
+
+export interface RoomsInfo {
+  /** Name of the room */
+  roomName: string;
+  /** Number of pax */
+  roomPax: string;
+  /** Client type */
+  clientType: string;
+  /** Meal plan */
+  mealPlan: string;
+  /** Amenities of the room */
+  roomAmenities: string[];
+}
+
+export interface DetailsContentAccomProps {
+  /** Title of the room */
+  roomTitle: string;
+  /** Description of the room */
+  roomDescription: string;
+  /** Global amenities */
+  globalAmenities: GlobalAmenity[];
+  /** Rooms info */
+  roomsInfo: RoomsInfo[];
+}
+
+/**
+ * Body for the DetailsContentAccom component.
+ *
+ * @example
+ * <DetailsContentAccomBody
+ *   roomsInfo={roomsInfo}
+ *   globalAmenities={globalAmenities}
+ * />
+ * @param props - Props of the DetailsContentAccomBody component
+ * @returns The DetailsContentAccomBody component
+ */
+const DetailsContentAccomBody = (
+  props: Omit<DetailsContentAccomProps, 'roomTitle' | 'roomDescription'>
+) => {
+  const { roomsInfo, globalAmenities } = props;
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-2 gap-x-4">
+        {roomsInfo.map((room, index) => (
+          <div className="space-y-4" key={`ri-${index}`}>
+            <TextWithIcon icon="accom" textVariant="bold" textSize="sm">
+              {room.roomName}
+            </TextWithIcon>
+            <div className="flex flex-wrap gap-2">
+              <Chip color="brand" type="outline" leadingIcon="user" isBlackText>
+                {room.roomPax} pax
+              </Chip>
+              <Chip color="brand" type="outline" leadingIcon="user" isBlackText>
+                {room.clientType}
+              </Chip>
+              <Chip color="brand" type="outline" leadingIcon="utensils" isBlackText>
+                {room.mealPlan}
+              </Chip>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {room.roomAmenities.map((amenity, index) => (
+                <Chip key={`ra-${index}`} color="accent" type="outline" isBlackText>
+                  {amenity}
+                </Chip>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="grid grid-cols-2 gap-x-8">
+        <GlobalAmenities amenities={globalAmenities} />
+        <CardServiceAccom className="flex items-center justify-center">
+          <Text variant="bold">Coming soon</Text>
+        </CardServiceAccom>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Details content for the Accommodation component.
+ *
+ * @example
+ * <DetailsContentAccom
+ *   roomTitle="Accommodation"
+ *   roomDescription="Accommodation description"
+ *   globalAmenities={globalAmenities}
+ *   roomsInfo={roomsInfo}
+ * />
+ *
+ * @param props - Props of the DetailsContentAccom component
+ * @returns The DetailsContentAccom component
+ */
+export function DetailsContentAccom(props: DetailsContentAccomProps) {
+  const { roomTitle, roomDescription, ...rest } = props;
+
+  const { isMobile } = useMobile(1280);
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <TextWithBorderBottom variant="bold" size="xl">
+          {roomTitle}
+        </TextWithBorderBottom>
+        <Text variant="medium" leading="5">
+          {roomDescription}
+        </Text>
+      </div>
+      {!isMobile && <DetailsContentAccomBody {...rest} />}
+    </div>
+  );
+}
+
+DetailsContentAccom.Body = DetailsContentAccomBody;

package/src/components/organisms/TabServiceDetails/DetailsContentExcursion.tsx

@@ -0,0 +1,65 @@
+import { Text } from '../../atoms/Typography/Typography';
+import { ServiceInfo } from '../../molecules/ServiceInfo/ServiceInfo';
+import { ServiceLanguages } from '../../molecules/ServiceLanguages/ServiceLanguages';
+import { TextWithBorderBottom } from '../../molecules/TextWithBorderBottom/TextWithBorderBottom';
+
+export interface ServiceInfoItem {
+  languages: string[];
+  duration: string;
+  meal: string;
+  difficulty: string;
+  withTransfer?: boolean;
+}
+
+export interface DetailsContentExcursionProps {
+  /** Title of the excursion */
+  excursionTitle: string;
+  /** Description of the excursion */
+  excursionDescription: string;
+  /** Pick-up point */
+  pickUpPoint: string;
+  /** Service information */
+  serviceInfos: ServiceInfoItem;
+}
+
+export function DetailsContentExcursion(props: DetailsContentExcursionProps) {
+  const { excursionTitle, excursionDescription, pickUpPoint, serviceInfos } = props;
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <TextWithBorderBottom variant="bold" size="xl">
+          {excursionTitle}
+        </TextWithBorderBottom>
+        <Text variant="medium" leading="5">
+          {excursionDescription}
+        </Text>
+      </div>
+      <div className="space-y-2">
+        <Text variant="bold" size="sm" leading="4">
+          Pick-up point:
+        </Text>
+        <Text size="sm" leading="4">
+          {pickUpPoint}
+        </Text>
+      </div>
+      <ServiceInfo>
+        <ServiceInfo.Item icon="micro" label="Languages">
+          <ServiceLanguages languages={serviceInfos.languages} />
+        </ServiceInfo.Item>
+        <ServiceInfo.Item icon="stopwatch" label="Duration">
+          {serviceInfos.duration}
+        </ServiceInfo.Item>
+        <ServiceInfo.Item icon="utensils" label="Meal">
+          {serviceInfos.meal}
+        </ServiceInfo.Item>
+        <ServiceInfo.Item icon="bike" label="Difficulty">
+          {serviceInfos.difficulty}
+        </ServiceInfo.Item>
+        {serviceInfos.withTransfer && (
+          <ServiceInfo.Item icon="bus" label="Prise en charge inclus" />
+        )}
+      </ServiceInfo>
+    </div>
+  );
+}

package/src/components/organisms/TabServiceDetails/Excursion.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {
+  DetailsContentExcursion,
+  DetailsContentExcursionProps,
+} from './DetailsContentExcursion';
+import TabServiceDetails from './TabServiceDetails';
+
+export interface ExcursionProps extends DetailsContentExcursionProps {
+  /** Images of the excursion */
+  images: string[];
+}
+
+export const Excursion: React.FC<ExcursionProps> = (props) => {
+  const { images, ...rest } = props;
+  return (
+    <TabServiceDetails.Layout title="Excursion" icon="map" images={images}>
+      <DetailsContentExcursion {...rest} />
+    </TabServiceDetails.Layout>
+  );
+};

package/src/components/organisms/TabServiceDetails/TabServiceDetails.tsx

@@ -0,0 +1,13 @@
+import { Accommodation } from './Accommodation';
+import { Excursion } from './Excursion';
+import TabServiceDetailsLayout from './TabServiceDetailsLayout/TabServiceDetailsLayout';
+import { Transfer } from './Transfer';
+
+export default function TabServiceDetails(props: React.PropsWithChildren) {
+  return <div className="tab-service-details" {...props} />;
+}
+
+TabServiceDetails.Layout = TabServiceDetailsLayout;
+TabServiceDetails.Accommodation = Accommodation;
+TabServiceDetails.Excursion = Excursion;
+TabServiceDetails.Transfer = Transfer;

package/src/components/organisms/TabServiceDetails/TabServiceDetailsLayout/TabServiceDetailsLayout.css

@@ -0,0 +1,55 @@
+.details-service__layout {
+  @apply grid gap-y-8;
+}
+
+.details-service__layout-flex {
+  @apply flex gap-x-8;
+}
+
+.details-service__layout-flex-images {
+  @apply space-y-4;
+  max-width: 300px;
+  @media (min-width: 1280px) {
+    max-width: 400px;
+  }
+  figure {
+    @apply overflow-hidden;
+    flex: 0 0 300px;
+    height: 181px;
+    border-radius: var(--border-radius-rounded-2xl);
+    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.19);
+    @media (min-width: 1280px) {
+      flex: 0 0 400px;
+      height: 241px;
+    }
+    &.single-image {
+      height: 300px;
+      @media (min-width: 1280px) {
+        height: 400px;
+      }
+    }
+  }
+  img {
+    object-fit: cover;
+  }
+}
+
+.details-service__layout-flex-images-grid {
+  @apply grid grid-cols-2 gap-x-4;
+  figure {
+    height: 107px;
+    max-width: 100%;
+    @media (min-width: 1280px) {
+      max-width: 192px;
+      height: 143px;
+    }
+  }
+}
+
+.details-service__layout-content {
+  @apply flex-1;
+}
+
+.details-service__layout-content-body {
+  @apply pt-6;
+}