mautourco-components 0.2.16 → 0.2.18

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

@@ -0,0 +1,82 @@
+import { useMobile } from '@/src/hooks/useMobile';
+import { cn } from '@/src/lib/utils';
+import React from 'react';
+import Chip from '../../../atoms/Chip/Chip';
+import { IconName } from '../../../atoms/Icon/Icon';
+import TextWithIcon from '../../../molecules/TextWithIcon/TextWithIcon';
+import './TabServiceDetailsLayout.css';
+
+export interface TabServiceDetailsLayoutProps {
+  /** Title of the service */
+  title: string;
+  /** Icon of the service */
+  icon: IconName;
+  /** Children of the service */
+  children: React.ReactNode;
+  /** Images of the service */
+  images: string[];
+  /** Mobile content of the service */
+  mobileContent?: React.ReactNode;
+  /** Whether the service is on request */
+  isOnRequest?: boolean;
+}
+
+/**
+ * Layout for the TabServiceDetails component.
+ *
+ * @example
+ * <TabServiceDetails.Layout
+ *   title="Accommodation"
+ *   icon="accom"
+ *   images={['image1.jpg', 'image2.jpg', 'image3.jpg']}
+ *   mobileContent={<div>Mobile content</div>}
+ *   isOnRequest={true}
+ * >
+ *   <div>Content</div>
+ * </TabServiceDetails.Layout>
+ *
+ * @param props - Props of the TabServiceDetailsLayout
+ * @returns The TabServiceDetailsLayout component
+ */
+export default function TabServiceDetailsLayout(props: TabServiceDetailsLayoutProps) {
+  const { title, icon, isOnRequest, children, images, mobileContent } = props;
+  const { isMobile } = useMobile(1280);
+
+  return (
+    <div>
+      <div className="details-service__layout">
+        <TextWithIcon
+          icon={icon}
+          color={isOnRequest ? 'yellow' : 'accent'}
+          textVariant="bold">
+          {title}
+          {isOnRequest && <Chip color="yellow">On request</Chip>}
+        </TextWithIcon>
+        <div className="details-service__layout-flex">
+          <div className="details-service__layout-flex-images">
+            {images[0] && (
+              <figure
+                key={images[0]}
+                className={cn(images.length === 1 && 'single-image')}>
+                <img src={images[0]} alt={title} width={400} height={400} />
+              </figure>
+            )}
+            {images.length > 1 && (
+              <div className="details-service__layout-flex-images-grid">
+                {images.slice(1, 3).map((image) => (
+                  <figure key={image}>
+                    <img src={image} alt={title} width={400} height={400} />
+                  </figure>
+                ))}
+              </div>
+            )}
+          </div>
+          <div className="details-service__layout-content">
+            <div className="details-service__layout-content-body">{children}</div>
+          </div>
+        </div>
+      </div>
+      {isMobile && mobileContent}
+    </div>
+  );
+}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import CancellationHeader from '../TabCancellationPolicy/CancellationHeader';
+import { TransferData } from '../TabCancellationPolicy/HeaderExcursion/HeaderTransfer';
+import TabCancellationPolicy from '../TabCancellationPolicy/TabCancellationPolicy';
+import {
+  DetailContentTransfer,
+  DetailContentTransferProps,
+} from './DetailContentTransfer';
+
+export interface TransferProps {
+  /** Image of the transfer */
+  image: string;
+  /** Transfer data */
+  transferData: TransferData[];
+  /** Details of the transfer */
+  transferDetails: DetailContentTransferProps;
+}
+
+export const Transfer: React.FC<TransferProps> = (props) => {
+  const { image, transferData, transferDetails } = props;
+  return (
+    <TabCancellationPolicy.Layout
+      title="Transfer"
+      icon="car"
+      image={image}
+      header={
+        <CancellationHeader>
+          <CancellationHeader.Transfer data={transferData} />
+        </CancellationHeader>
+      }>
+      <DetailContentTransfer {...transferDetails} />
+    </TabCancellationPolicy.Layout>
+  );
+};

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

@@ -0,0 +1,5 @@
+export * from './TabServiceDetails';
+
+export type { AccommodationProps } from './Accommodation';
+export type { DetailsContentExcursionProps } from './DetailsContentExcursion';
+export type { TabServiceDetailsLayoutProps } from './TabServiceDetailsLayout/TabServiceDetailsLayout';

package/src/components/organisms/Table/Table.css

@@ -104,6 +104,54 @@
         border-bottom: none;
       }
     }
+    &.table__children--visible {
+      @apply relative;
+      border: 1px solid transparent;
+      border-left: none;
+      &::after {
+        content: '';
+        position: absolute;
+        inset: -1px;
+        pointer-events: none;
+        max-width: 100%;
+        background-image:
+          repeating-linear-gradient(
+            to right,
+            var(--color-border-medium) 0,
+            var(--color-border-medium) 16px,
+            transparent 16px,
+            transparent 32px
+          ),
+          repeating-linear-gradient(
+            to right,
+            var(--color-border-medium) 0,
+            var(--color-border-medium) 16px,
+            transparent 16px,
+            transparent 32px
+          ),
+          repeating-linear-gradient(
+            to bottom,
+            var(--color-border-medium) 0,
+            var(--color-border-medium) 16px,
+            transparent 16px,
+            transparent 32px
+          ),
+          repeating-linear-gradient(
+            to bottom,
+            var(--color-border-medium) 0,
+            var(--color-border-medium) 16px,
+            transparent 16px,
+            transparent 32px
+          );
+        background-size:
+          100% 1px,
+          100% 1px,
+          1px 100%,
+          1px 100%;
+        background-position: top, bottom, left, right;
+        background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+      }
+    }
   }
   .table__nested-wrapper {
     overflow: hidden;
@@ -183,3 +231,9 @@
     }
   }
 }
+
+.table__row-with-children {
+  > td {
+    padding: 0;
+  }
+}

package/src/components/organisms/Table/Table.tsx

@@ -197,29 +197,44 @@ export const Table = <T extends TableRowData<T>>(props: TableProps<T>) => {
                       ) : (
                         defaultTable
                       )
+                    ) : !row.children ? (
+                      defaultTable
                     ) : (
-                      <>
-                        {defaultTable}
-                        <AnimatePresence initial={false}>
-                          {hasVisibleChildren && (
-                            <tr
-                              key={`nested-${rowIndex}`}
-                              className={cn('table__no-hover', {
-                                'table__row-nested':
-                                  row.children && row.children.length > 0,
-                              })}>
-                              <td colSpan={columns.length} className="table__cell-nested">
-                                <NestedContent<T>
-                                  rowIndex={rowIndex}
-                                  columns={columns}
-                                  children={row.children || []}
-                                  onClickRow={onClickRow}
-                                />
-                              </td>
-                            </tr>
-                          )}
-                        </AnimatePresence>
-                      </>
+                      <tr
+                        className="table__row-with-children"
+                        onClick={(e) => onClickRow?.(e, row)}>
+                        <td
+                          colSpan={columns.length}
+                          className={cn({
+                            'table__children--visible': hasVisibleChildren,
+                          })}>
+                          <table className="table">
+                            <tbody>
+                              {defaultTable}
+                              <AnimatePresence initial={false}>
+                                {hasVisibleChildren && (
+                                  <tr
+                                    key={`nested-${rowIndex}`}
+                                    className={cn('table__no-hover', {
+                                      'table__row-nested':
+                                        row.children && row.children.length > 0,
+                                    })}>
+                                    <td
+                                      colSpan={columns.length}
+                                      className="table__cell-nested">
+                                      <NestedContent<T>
+                                        rowIndex={rowIndex}
+                                        columns={columns}
+                                        children={row.children || []}
+                                      />
+                                    </td>
+                                  </tr>
+                                )}
+                              </AnimatePresence>
+                            </tbody>
+                          </table>
+                        </td>
+                      </tr>
                     )}
                   </Fragment>
                 );

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

@@ -1,3 +1,4 @@
+import { cn } from '@/src/lib/utils';
 import React from 'react';
 import { Text } from '../../atoms/Typography/Typography';
 import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
@@ -15,13 +16,14 @@ export interface TimelineProps {
   arrival: string;
   departure: string;
   services: TimelineServices[];
+  className?: string;
 }
 
 export const Timeline: React.FC<TimelineProps> = (props) => {
-  const { arrival, departure, services } = props;
+  const { arrival, departure, services, className } = props;
   return (
-    <div className="space-y-10">
-      <TextWithIcon icon="arrival" color="accent" iconSize="lg">
+    <div className={cn('space-y-10', className)}>
+      <TextWithIcon icon="arrival" color="accent" iconSize="lg" textSize="lg">
         Arrival :{' '}
         <Text variant="regular" size="lg" leading="5" color="default" as="span">
           {arrival}
@@ -46,7 +48,7 @@ export const Timeline: React.FC<TimelineProps> = (props) => {
           ))}
         </div>
       </div>
-      <TextWithIcon icon="departure" color="accent" iconSize="lg">
+      <TextWithIcon icon="departure" color="accent" iconSize="lg" textSize="lg">
         Departure :{' '}
         <Text variant="regular" size="lg" leading="5" color="default" as="span">
           {departure}