mautourco-components 0.2.15 → 0.2.17

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">
+        {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,39 @@
+.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 400px;
+    height: 400px;
+    border-radius: var(--border-radius-rounded-2xl);
+    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.19);
+  }
+}
+
+.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/Table/columns/booking-columns.tsx

@@ -50,7 +50,7 @@ export const bookingColumns: (params: {
     width: 260,
     cell: (value) => {
       const dates = value as string[];
-      return <DateDisplay date={dates} />;
+      return <DateDisplay dates={dates} />;
     },
   },
   {

package/src/components/organisms/Table/columns/detail-resume-columns.tsx

@@ -130,7 +130,7 @@ export const detailResumeColumns: () => ColumnType<DetailResumeItem>[] = () => {
             date = [otherService.service_date];
             break;
         }
-        return <DateDisplay date={date} />;
+        return <DateDisplay dates={date} />;
       },
     },
     {

package/src/components/organisms/Table/columns/quotation-columns.tsx

@@ -67,7 +67,7 @@ export const quotationColumns: (params: {
     width: 260,
     cell: (value) => {
       const dates = value as string[];
-      return <DateDisplay date={dates} />;
+      return <DateDisplay dates={dates} />;
     },
   },
   {
@@ -105,10 +105,15 @@ export const quotationColumns: (params: {
     header: 'Created by',
     key: 'created_by',
     width: 160,
-    cell: (value) => (
-      <Text variant="medium" size="sm">
-        {value as string}
-      </Text>
+    cell: (value, raw) => (
+      <>
+        <Text variant="medium" size="sm" leading="4">
+          {raw.file_name},
+        </Text>
+        <Text variant="bold" size="sm" leading="4">
+          {value as string}
+        </Text>
+      </>
     ),
   },
   {

package/src/components/organisms/Timeline/Timeline.tsx

@@ -0,0 +1,59 @@
+import { cn } from '@/src/lib/utils';
+import React from 'react';
+import { Text } from '../../atoms/Typography/Typography';
+import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
+import { ServiceAccommodationProps } from '../../molecules/TimelineItem/ServiceAccommodation';
+import { ServiceExcursionProps } from '../../molecules/TimelineItem/ServiceExcursion';
+import { ServiceTransferProps } from '../../molecules/TimelineItem/ServiceTransfer';
+import TimelineItem from '../../molecules/TimelineItem/TimelineItem';
+
+export interface TimelineServices {
+  type: 'transfer' | 'accommodation' | 'excursion';
+  data: ServiceTransferProps | ServiceAccommodationProps | ServiceExcursionProps;
+}
+
+export interface TimelineProps {
+  arrival: string;
+  departure: string;
+  services: TimelineServices[];
+  className?: string;
+}
+
+export const Timeline: React.FC<TimelineProps> = (props) => {
+  const { arrival, departure, services, className } = props;
+  return (
+    <div className={cn('space-y-10', className)}>
+      <TextWithIcon icon="arrival" color="accent" iconSize="lg">
+        Arrival :{' '}
+        <Text variant="regular" size="lg" leading="5" color="default" as="span">
+          {arrival}
+        </Text>
+      </TextWithIcon>
+      <div className="overflow-x-auto">
+        <div className="flex gap-x-3 pb-8 2xl:pb-0">
+          {services.map((service, index) => (
+            <TimelineItem key={`tm-${index}`}>
+              {service.type === 'transfer' && (
+                <TimelineItem.Transfer {...(service.data as ServiceTransferProps)} />
+              )}
+              {service.type === 'accommodation' && (
+                <TimelineItem.Accommodation
+                  {...(service.data as ServiceAccommodationProps)}
+                />
+              )}
+              {service.type === 'excursion' && (
+                <TimelineItem.Excursion {...(service.data as ServiceExcursionProps)} />
+              )}
+            </TimelineItem>
+          ))}
+        </div>
+      </div>
+      <TextWithIcon icon="departure" color="accent" iconSize="lg">
+        Departure :{' '}
+        <Text variant="regular" size="lg" leading="5" color="default" as="span">
+          {departure}
+        </Text>
+      </TextWithIcon>
+    </div>
+  );
+};