mautourco-components 0.2.15 → 0.2.17

package/src/components/molecules/DetailsInfo/DetailsAgency.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Chip from '../../atoms/Chip/Chip';
+import { Text } from '../../atoms/Typography/Typography';
+import './DetailsAgency.css';
+
+export interface DetailsAgencyProps {
+  name: string;
+  clientType: string;
+  isOnRequest: boolean;
+  children?: React.ReactNode;
+}
+
+export const DetailsAgency: React.FC<DetailsAgencyProps> = (props) => {
+  const { name, clientType, isOnRequest, children } = props;
+  return (
+    <div className="flex flex-col gap-y-6 items-end">
+      <img src="/images/mautourco-logo.png" alt="Mautourco Logo" width={220} />
+      <div className="details-agency">
+        <Text variant="bold" color="accent">
+          Documents details:
+        </Text>
+        <div className="details-agency__content">
+          <div className="details-agency__content-item">
+            <Text
+              variant="bold"
+              size="sm"
+              leading="4"
+              className="details-agency__content-item-name">
+              Agency
+            </Text>
+            <Text size="sm" leading="4">
+              {name}
+            </Text>
+          </div>{' '}
+          <div className="details-agency__content-item">
+            <Text
+              variant="bold"
+              size="sm"
+              leading="4"
+              className="details-agency__content-item-name">
+              Client type
+            </Text>
+            <Text size="sm" leading="4">
+              {clientType}
+            </Text>
+          </div>
+        </div>
+      </div>
+      {isOnRequest && <Chip color="yellow">Waiting for confirmation</Chip>}
+      {children}
+    </div>
+  );
+};

package/src/components/molecules/DetailsInfo/DetailsFile.tsx

@@ -0,0 +1,27 @@
+import { cn } from '@/src/lib/utils';
+import React from 'react';
+import { Text } from '../../atoms/Typography/Typography';
+
+export interface DetailsFileProps {
+  number: string;
+  name: string;
+  label?: string;
+  isBig?: boolean;
+}
+
+export const DetailsFile: React.FC<DetailsFileProps> = (props) => {
+  const { number, name, label = 'File number:', isBig = false } = props;
+  return (
+    <div className="grid gap-y-2">
+      <Text
+        variant={isBig ? 'bold' : 'regular'}
+        className={cn(isBig && 'text-2xl')}
+        color={isBig ? 'brand' : 'default'}>
+        {label} {number}
+      </Text>
+      <Text variant="medium" color="accent">
+        {name}
+      </Text>
+    </div>
+  );
+};

package/src/components/molecules/DetailsInfo/DetailsInfo.tsx

@@ -0,0 +1,17 @@
+import { cn } from '@/src/lib/utils';
+import { DetailsAction } from './DetailsAction';
+import { DetailsAgency } from './DetailsAgency';
+import { DetailsFile } from './DetailsFile';
+
+export interface DetailsInfoProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export default function DetailsInfo(props: DetailsInfoProps) {
+  return <div className={cn('details-info', props.className)} {...props} />;
+}
+
+DetailsInfo.File = DetailsFile;
+DetailsInfo.Agency = DetailsAgency;
+DetailsInfo.Action = DetailsAction;

package/src/components/molecules/DetailsInfo/index.ts

@@ -0,0 +1,4 @@
+export type { DetailsActionProps } from './DetailsAction';
+export type { DetailsAgencyProps } from './DetailsAgency';
+export type { DetailsFileProps } from './DetailsFile';
+export * from './DetailsInfo';

package/src/components/molecules/ServiceTitle/ServiceTitle.css

@@ -0,0 +1,13 @@
+.service-title {
+  @apply relative;
+  padding-left: 10px;
+  &::before {
+    content: '';
+    @apply absolute;
+    width: 2px;
+    left: 0;
+    top: 4px;
+    bottom: 4px;
+    background-color: var(--color-elevation-brand-subtle);
+  }
+}

package/src/components/molecules/ServiceTitle/ServiceTitle.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Text, TextProps } from '../../atoms/Typography/Typography';
+import './ServiceTitle.css';
+
+export interface ServiceTitleProps {
+  title: string;
+  textSize?: TextProps['size'];
+}
+
+export const ServiceTitle: React.FC<ServiceTitleProps> = (props) => {
+  const { title, textSize = 'md' } = props;
+  return (
+    <div className="service-title">
+      <Text variant="bold" size={textSize} color="accent">
+        {title}
+      </Text>
+    </div>
+  );
+};

package/src/components/molecules/TableServiceItem/DetailsCol.tsx

@@ -1,8 +1,9 @@
+import { cn } from '@/src/lib/utils';
 import React from 'react';
 import { IconName } from '../../atoms/Icon/Icon';
 import TextWithIcon from '../TextWithIcon/TextWithIcon';
 
-interface DetailsColData {
+export interface DetailsColData {
   icon: IconName;
   value: React.ReactNode;
 }
@@ -10,15 +11,18 @@ interface DetailsColData {
 export interface DetailsColProps {
   data: DetailsColData[];
   index?: number;
+  className?: string;
 }
 
 export const DetailsCol: React.FC<DetailsColProps> = (props) => {
-  const { data } = props;
+  const { data, className } = props;
 
   return (
-    <div className="grid gap-y-1">
-      {data.map((item) => (
-        <TextWithIcon icon={item.icon}>{item.value}</TextWithIcon>
+    <div className={cn('grid gap-y-1', className)}>
+      {data.map((item, index) => (
+        <TextWithIcon icon={item.icon} key={`dc-${index}`}>
+          {item.value}
+        </TextWithIcon>
       ))}
     </div>
   );

package/src/components/molecules/TextWithIcon/TextWithIcon.tsx

@@ -1,6 +1,11 @@
 import { cn } from '@/src/lib/utils';
 import Icon, { IconName } from '../../atoms/Icon/Icon';
-import { Text, TextColor, TextLeading, TextVariant } from '../../atoms/Typography/Typography';
+import {
+  Text,
+  TextColor,
+  TextLeading,
+  TextVariant,
+} from '../../atoms/Typography/Typography';
 
 export interface TextWithIconProps {
   /** Icon to display */
@@ -34,7 +39,14 @@ export interface TextWithIconProps {
  * @returns
  */
 const TextWithIcon: React.FC<TextWithIconProps> = (props) => {
-  const { icon, children, iconSize = 'sm', color = 'default', textLeading = '5', textVariant = 'medium' } = props;
+  const {
+    icon,
+    children,
+    iconSize = 'sm',
+    color = 'default',
+    textLeading = '5',
+    textVariant = 'medium',
+  } = props;
 
   return (
     <div
@@ -43,9 +55,11 @@ const TextWithIcon: React.FC<TextWithIconProps> = (props) => {
         color === 'yellow' && 'text-[var(--color-yellow-600)]',
         color === 'accent' && 'text-[var(--color-text-accent)]'
       )}>
-      <span>
-        <Icon name={icon} size={iconSize} />
-      </span>
+      {icon && (
+        <span>
+          <Icon name={icon} size={iconSize} />
+        </span>
+      )}
       <Text
         variant={textVariant}
         size={iconSize}

package/src/components/molecules/TimelineItem/ServiceAccommodation.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Text } from '../../atoms/Typography/Typography';
+import { DateDisplay } from '../DateDisplay/DateDisplay';
+import { DetailsCol, DetailsColData } from '../TableServiceItem/DetailsCol';
+import { TimelineHeader } from './TimelineHeader';
+
+export interface ServiceAccommodationProps {
+  hotelName: string;
+  details: DetailsColData[];
+  dates: string[] | Date[];
+  isOnRequest?: boolean;
+}
+
+export const ServiceAccommodation: React.FC<ServiceAccommodationProps> = (props) => {
+  const { hotelName, details, dates, isOnRequest } = props;
+
+  return (
+    <div className="space-y-3">
+      <TimelineHeader icon="accom" title="Accomodation" isOnRequest={isOnRequest} />
+      <Text variant="bold" size="sm" leading="5">
+        {hotelName}
+      </Text>
+      <div className="space-y-2">
+        <DateDisplay dates={dates} />
+        <DetailsCol data={details} className="gap-y-2" />
+      </div>
+    </div>
+  );
+};

package/src/components/molecules/TimelineItem/ServiceExcursion.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Text } from '../../atoms/Typography/Typography';
+import { DateDisplay } from '../DateDisplay/DateDisplay';
+import { DetailsCol, DetailsColData } from '../TableServiceItem/DetailsCol';
+import { TimelineHeader } from './TimelineHeader';
+
+export interface ServiceExcursionProps {
+  name: string;
+  details: DetailsColData[];
+  date: string;
+}
+
+export const ServiceExcursion: React.FC<ServiceExcursionProps> = (props) => {
+  const { name, details, date } = props;
+
+  return (
+    <div className="space-y-3">
+      <TimelineHeader icon="map" title="Excursion" />
+      <Text variant="bold" size="sm" leading="5">
+        {name}
+      </Text>
+      <div className="space-y-2">
+        <DateDisplay dates={[date]} />
+        <DetailsCol data={details} className="gap-y-2" />
+      </div>
+    </div>
+  );
+};

package/src/components/molecules/TimelineItem/ServiceTransfer.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import FromTo from '../FromTo/FromTo';
+import { DetailsCol, DetailsColData } from '../TableServiceItem/DetailsCol';
+import { TimelineHeader } from './TimelineHeader';
+
+export interface ServiceTransferProps {
+  transferType: string;
+  location: {
+    from: string;
+    to: string;
+  };
+  details: DetailsColData[];
+}
+
+export const ServiceTransfer: React.FC<ServiceTransferProps> = (props) => {
+  const { transferType, location, details } = props;
+
+  return (
+    <div className="space-y-3">
+      <TimelineHeader icon="car" title="Transfer" extraText={transferType} />
+      <FromTo from={location.from} to={location.to} />
+      <DetailsCol data={details} className="gap-y-2" />
+    </div>
+  );
+};

package/src/components/molecules/TimelineItem/TimelineHeader.css

@@ -0,0 +1,44 @@
+.timeline-header {
+  @apply space-y-2;
+  min-width: 307px;
+
+  &.timeline-header--request {
+    .timeline-header__icon-container::after {
+      content: '';
+      @apply absolute top-1/2 left-10 -translate-y-1/2;
+      height: 1px;
+      background-color: transparent;
+      background-image: repeating-linear-gradient(
+        to right,
+        var(--color-yellow-600) 0,
+        var(--color-yellow-600) 8px,
+        transparent 8px,
+        transparent 16px
+      );
+    }
+    .timeline-header__icon {
+      border-color: var(--color-yellow-600);
+      color: var(--color-yellow-600);
+      background-color: var(--color-yellow-50);
+    }
+  }
+}
+
+.timeline-header__icon-container {
+  @apply flex items-center relative;
+  &::after {
+    content: '';
+    @apply absolute top-1/2 left-10 right-0 -translate-y-1/2;
+    height: 1px;
+    background-color: var(--color-border-accent-secondary);
+  }
+}
+
+.timeline-header__icon {
+  @apply flex items-center justify-center;
+  @apply w-8 h-8 shrink-0 grow-0 basis-8;
+  @apply rounded-full;
+  border: solid 1px var(--color-border-accent-secondary);
+  color: var(--color-border-accent-secondary);
+  background-color: var(--color-atoll-green-100);
+}

package/src/components/molecules/TimelineItem/TimelineHeader.tsx

@@ -0,0 +1,41 @@
+import { cn } from '@/src/lib/utils';
+import React from 'react';
+import Chip from '../../atoms/Chip/Chip';
+import Icon, { IconName } from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import './TimelineHeader.css';
+
+export interface TimelineHeaderProps {
+  icon: IconName;
+  title: string;
+  extraText?: string;
+  isOnRequest?: boolean;
+}
+
+export const TimelineHeader: React.FC<TimelineHeaderProps> = (props) => {
+  const { icon = 'car', title, extraText, isOnRequest = false } = props;
+  return (
+    <div className={cn('timeline-header', isOnRequest && 'timeline-header--request')}>
+      <div className="timeline-header__icon-container">
+        <div className="timeline-header__icon">
+          <Icon name={icon} />
+        </div>
+      </div>
+      <div className="flex gap-x-2 items-center">
+        <Text
+          variant="bold"
+          size="md"
+          color={isOnRequest ? 'yellow' : 'accent'}
+          leading="5">
+          {title}
+        </Text>
+        {extraText && (
+          <Text variant="medium" size="md" color="accent" className="italic" leading="5">
+            {extraText}
+          </Text>
+        )}
+        {isOnRequest && <Chip color="yellow">On request</Chip>}
+      </div>
+    </div>
+  );
+};

package/src/components/molecules/TimelineItem/TimelineItem.css

@@ -0,0 +1,7 @@
+.timeline-item {
+  &:last-child {
+    .timeline-header__icon-container::after {
+      display: none;
+    }
+  }
+}

package/src/components/molecules/TimelineItem/TimelineItem.tsx

@@ -0,0 +1,17 @@
+import { ServiceAccommodation } from './ServiceAccommodation';
+import { ServiceExcursion } from './ServiceExcursion';
+import { ServiceTransfer } from './ServiceTransfer';
+import './TimelineItem.css';
+
+export interface TimelineItemProps {
+  children: React.ReactNode;
+}
+
+export default function TimelineItem(props: TimelineItemProps) {
+  const { children } = props;
+  return <div className="timeline-item">{children}</div>;
+}
+
+TimelineItem.Transfer = ServiceTransfer;
+TimelineItem.Accommodation = ServiceAccommodation;
+TimelineItem.Excursion = ServiceExcursion;

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

@@ -0,0 +1,41 @@
+import CancellationBody from './CancellationBody';
+import CancellationHeader from './CancellationHeader';
+import { Policy } from './PolicyAccom/PolicyAccom';
+import DetailsCancellationPolicy from './TabCancellationPolicy';
+
+export interface CancellationAccomProps {
+  hotelName: string;
+  pax: number;
+  dates: string[];
+  image: string;
+  roomPolicies: Array<{
+    roomName: string;
+    policies: Policy[];
+  }>;
+}
+
+export default function CancellationAccom(props: CancellationAccomProps) {
+  const { hotelName, pax, dates, image, roomPolicies } = props;
+  return (
+    <DetailsCancellationPolicy.Layout
+      title="Accommodation"
+      icon="accom"
+      isOnRequest
+      image={image}
+      header={
+        <CancellationHeader>
+          <CancellationHeader.Accom hotelName={hotelName} pax={pax} dates={dates} />
+        </CancellationHeader>
+      }>
+      <CancellationBody>
+        {roomPolicies.map((roomPolicy, index) => (
+          <CancellationBody.Accom
+            key={index}
+            roomName={roomPolicy.roomName}
+            policies={roomPolicy.policies}
+          />
+        ))}
+      </CancellationBody>
+    </DetailsCancellationPolicy.Layout>
+  );
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import PolicyAccom from './PolicyAccom/PolicyAccom';
+import PolicyExcursion from './PolicyExcursion';
+import PolicyTransfer from './PolicyTransfer';
+
+export default function CancellationBody(props: React.PropsWithChildren) {
+  return <div className="cancellation-body" {...props} />;
+}
+
+CancellationBody.Accom = PolicyAccom;
+CancellationBody.Excursion = PolicyExcursion;
+CancellationBody.Transfer = PolicyTransfer;

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

@@ -0,0 +1,31 @@
+import CancellationBody from './CancellationBody';
+import CancellationHeader from './CancellationHeader';
+import DetailsCancellationPolicy from './TabCancellationPolicy';
+
+export interface CancellationExcursionProps {
+  name: string;
+  date: string;
+  image: string;
+  pickUpPoint: string;
+  policies: string;
+}
+
+export default function CancellationExcursion(props: CancellationExcursionProps) {
+  const { name, date, image, pickUpPoint, policies } = props;
+  return (
+    <DetailsCancellationPolicy.Layout
+      title="Excursion"
+      icon="map"
+      isOnRequest={false}
+      image={image}
+      header={
+        <CancellationHeader>
+          <CancellationHeader.Excursion name={name} date={date} />
+        </CancellationHeader>
+      }>
+      <CancellationBody>
+        <CancellationBody.Excursion pickUpPoint={pickUpPoint} policies={policies} />
+      </CancellationBody>
+    </DetailsCancellationPolicy.Layout>
+  );
+}

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

@@ -0,0 +1,11 @@
+import HeaderAccom from './HeaderAccom';
+import HeaderExcursion from './HeaderExcursion';
+import HeaderTransfer from './HeaderExcursion/HeaderTransfer';
+
+export default function CancellationHeader(props: React.PropsWithChildren) {
+  return <div className="cancellation-header" {...props} />;
+}
+
+CancellationHeader.Accom = HeaderAccom;
+CancellationHeader.Excursion = HeaderExcursion;
+CancellationHeader.Transfer = HeaderTransfer;

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

@@ -0,0 +1,29 @@
+import CancellationBody from './CancellationBody';
+import CancellationHeader from './CancellationHeader';
+import { TransferData } from './HeaderExcursion/HeaderTransfer';
+import DetailsCancellationPolicy from './TabCancellationPolicy';
+
+export interface CancellationTransferProps {
+  image: string;
+  carName: string;
+  transferData: TransferData[];
+}
+export default function CancellationTransfer(props: CancellationTransferProps) {
+  const { image, carName, transferData } = props;
+  return (
+    <DetailsCancellationPolicy.Layout
+      title="Transfer"
+      icon="car"
+      isOnRequest={false}
+      image={image}
+      header={
+        <CancellationHeader>
+          <CancellationHeader.Transfer data={transferData} />
+        </CancellationHeader>
+      }>
+      <CancellationBody>
+        <CancellationBody.Transfer carName={carName} />
+      </CancellationBody>
+    </DetailsCancellationPolicy.Layout>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { differenceInDays } from 'date-fns';
+import { useMemo } from 'react';
+import { DateDisplay } from '../../molecules/DateDisplay/DateDisplay';
+import { ServiceTitle } from '../../molecules/ServiceTitle/ServiceTitle';
+import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
+
+export interface HeaderAccomProps {
+  hotelName: string;
+  pax: number;
+  dates: string[];
+}
+
+export default function HeaderAccom(props: HeaderAccomProps) {
+  const { hotelName, pax, dates } = props;
+
+  const stay = useMemo(() => {
+    if (dates.length) {
+      return differenceInDays(dates[1], dates[0]);
+    }
+    return 0;
+  }, [dates]);
+
+  return (
+    <div>
+      <ServiceTitle title={hotelName} textSize="sm" />
+      <TextWithIcon icon="user">{pax} pax</TextWithIcon>
+      <DateDisplay dates={dates} arrowSize="xs" calendarSize="xs" />
+      <TextWithIcon icon="night">{stay} Nights</TextWithIcon>
+    </div>
+  );
+}

package/src/components/organisms/TabCancellationPolicy/HeaderExcursion/HeaderTransfer.css

@@ -0,0 +1,3 @@
+.transfer-header {
+  @apply grid grid-cols-2 gap-x-4;
+}

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

@@ -0,0 +1,48 @@
+import Icon from '../../../atoms/Icon/Icon';
+import { Text } from '../../../atoms/Typography/Typography';
+import { DateDisplay } from '../../../molecules/DateDisplay/DateDisplay';
+import TextWithIcon from '../../../molecules/TextWithIcon/TextWithIcon';
+import './HeaderTransfer.css';
+
+export interface TransferData {
+  type: 'ARV' | 'DEP' | 'INH';
+  pax: number;
+  date: string;
+  from: string;
+  to: string;
+}
+
+export interface HeaderTransferProps {
+  data: TransferData[];
+}
+
+const transferLabel: Record<TransferData['type'], string> = {
+  ARV: 'Arrival',
+  DEP: 'Departure',
+  INH: 'Inter-Hotel',
+};
+
+export default function HeaderTransfer(props: HeaderTransferProps) {
+  const { data } = props;
+
+  return (
+    <div className="transfer-header">
+      {data.map((item, index) => (
+        <div key={`ht-${index}`}>
+          <TextWithIcon icon={item.type === 'DEP' ? 'departure' : 'arrival'}>
+            {transferLabel[item.type]}
+          </TextWithIcon>
+          <TextWithIcon icon="user">{item.pax} pax</TextWithIcon>
+          <DateDisplay dates={[item.date]} arrowSize="xs" calendarSize="xs" />
+          <Text
+            size="sm"
+            variant="medium"
+            leading="5"
+            className="flex items-center gap-x-1">
+            {item.from} <Icon name="arrow-right-outline" size="xs" /> {item.to}
+          </Text>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { DateDisplay } from '../../molecules/DateDisplay/DateDisplay';
+import { ServiceTitle } from '../../molecules/ServiceTitle/ServiceTitle';
+
+export interface HeaderExcursionProps {
+  name: string;
+  date: string;
+}
+
+export default function HeaderExcursion(props: HeaderExcursionProps) {
+  const { name, date } = props;
+
+  return (
+    <div>
+      <ServiceTitle title={name} textSize="sm" />
+      <DateDisplay dates={[date]} arrowSize="xs" calendarSize="xs" />
+    </div>
+  );
+}

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

@@ -0,0 +1,8 @@
+.policy-accom {
+  @apply space-y-6;
+}
+
+.policy-accom__period {
+  @apply inline-flex gap-x-4 items-center rounded-full px-2 py-[1px];
+  border: solid 1px var(--chip-policy-color-border);
+}