mautourco-components 0.2.30 → 0.2.32

package/src/components/organisms/DialogComparison/DialogComparison.tsx

@@ -0,0 +1,157 @@
+import {
+  DetailResumeAccommodation,
+  DetailResumeExcursion,
+  DetailResumeOtherService,
+  DetailResumeTransfer,
+  ServiceType,
+} from '@/src/types/table';
+import { useEffect, useState } from 'react';
+import Button from '../../atoms/Button/Button';
+import Chip from '../../atoms/Chip/Chip';
+import MultiSelectDropdown from '../../molecules/MultiSelectDropdown/MultiSelectDropdown';
+import { DialogBookingConfirm } from '../DialogBookingConfirm';
+import { Table } from '../Table';
+import { columns as defaultColumns } from '../Table/columns';
+import { ColumnType } from '../Table/TableCell';
+import './DialogComparison.css';
+
+export type ComparisonData =
+  | DetailResumeAccommodation
+  | DetailResumeTransfer
+  | DetailResumeExcursion
+  | DetailResumeOtherService;
+
+export interface MultiComparisonData {
+  id: string;
+  name: string;
+  data: ComparisonData[];
+}
+
+export interface DialogComparisonProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  data: MultiComparisonData[];
+  columns?: ColumnType<ComparisonData>[];
+  onBookNow: (payload: {
+    selectedValues: string[];
+    filteredData: MultiComparisonData[];
+  }) => void;
+}
+
+export const isComparisonAccommodation = (
+  data: ComparisonData
+): data is ComparisonData & DetailResumeAccommodation => {
+  return data.Type === ServiceType.ACCOMMODATION;
+};
+
+export const isComparisonTransfer = (
+  data: ComparisonData
+): data is ComparisonData & DetailResumeTransfer => {
+  return data.Type === ServiceType.TRANSFER;
+};
+
+export const isComparisonExcursion = (
+  data: ComparisonData
+): data is ComparisonData & DetailResumeExcursion => {
+  return data.Type === ServiceType.EXCURSION;
+};
+
+export const isComparisonOtherService = (
+  data: ComparisonData
+): data is ComparisonData & DetailResumeOtherService => {
+  return data.Type === ServiceType.OTHER_SERVICE;
+};
+
+export const DialogComparison = (props: DialogComparisonProps) => {
+  const { open, data, columns, setOpen, onBookNow } = props;
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+  const [filteredData, setFilteredData] = useState<MultiComparisonData[]>(data);
+
+  const getTotalRows = (comparisonData: ComparisonData[]) => {
+    const totalMap = new Map<string, number>();
+
+    comparisonData.forEach((item) => {
+      if (isComparisonAccommodation(item)) {
+        const currency = item.Currency;
+        const total = parseFloat(item.Total) || 0;
+        const currentTotal = totalMap.get(currency) || 0;
+        totalMap.set(currency, currentTotal + total);
+      }
+      if (isComparisonTransfer(item) || isComparisonExcursion(item)) {
+        const currency = item.Currency;
+        const total = parseFloat(item.TotalPrice) || 0;
+        const currentTotal = totalMap.get(currency) || 0;
+        totalMap.set(currency, currentTotal + total);
+      }
+      if (isComparisonOtherService(item)) {
+        const currency = item.currency;
+        const total = parseFloat(item.total_price) || 0;
+        const currentTotal = totalMap.get(currency) || 0;
+        totalMap.set(currency, currentTotal + total);
+      }
+    });
+
+    return Object.fromEntries(totalMap);
+  };
+
+  const handleSelectionChange = (selectedValues: string[]) => {
+    if (selectedValues.length >= 1) {
+      setSelectedValues(selectedValues);
+      setFilteredData(data.filter((d) => selectedValues.includes(d.id)));
+    }
+  };
+
+  useEffect(() => {
+    setSelectedValues(data.map((d) => d.id));
+  }, [data]);
+
+  return (
+    <DialogBookingConfirm
+      title="Comparison of the quotations"
+      open={open}
+      setOpen={setOpen}
+      className="!max-w-[1255px]"
+      closeOnOverlayClick>
+      <div className="dialog-comparison">
+        <div className="dialog-comparison__filter">
+          <MultiSelectDropdown
+            options={data.map((d) => ({
+              id: d.id,
+              label: d.name,
+            }))}
+            selectedValues={selectedValues}
+            onSelectionChange={handleSelectionChange}
+            maxDisplayedChips={2}
+            useTextForMaxDisplayedChips
+          />
+        </div>
+        <div className="dialog-comparison__list">
+          {filteredData.map((d, index) => (
+            <div key={`cp-${index}`} className="dialog-comparison__item">
+              <Chip label={d.name} color="brand" type="outline" size="lg" />
+              <Table<ComparisonData>
+                data={d.data}
+                columns={columns || defaultColumns.comparison()}
+                totalRows={getTotalRows(d.data)}
+                isTotalBorderDash={false}
+                totalSubstractedSpace={0}
+              />
+            </div>
+          ))}
+        </div>
+        <div className="dialog-comparison__footer">
+          <Button
+            variant="secondary"
+            onClick={() =>
+              onBookNow({
+                selectedValues,
+                filteredData,
+              })
+            }>
+            Book now
+          </Button>
+        </div>
+      </div>
+    </DialogBookingConfirm>
+  );
+};

package/src/components/organisms/DialogDeleteConfirm/DialogDeleteConfirm.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import Button, { ButtonProps } from '../../atoms/Button/Button';
+import { Text } from '../../atoms/Typography/Typography';
+import { DialogBookingConfirm } from '../DialogBookingConfirm';
+
+export interface DialogDeleteConfirmProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  message: string;
+  title: string;
+  cancelText?: string;
+  okText?: string;
+  okVariant?: ButtonProps['variant'];
+  onOk?: () => void;
+  onCancel?: () => void;
+}
+
+export const DialogDeleteConfirm: React.FC<DialogDeleteConfirmProps> = (props) => {
+  const {
+    open,
+    setOpen,
+    message,
+    title,
+    cancelText = 'Cancel',
+    okText = 'Delete',
+    okVariant = 'destructive',
+    onOk,
+    onCancel,
+  } = props;
+  return (
+    <DialogBookingConfirm
+      open={open}
+      setOpen={setOpen}
+      title={title}
+      className="!max-w-[500px]"
+      closeOnOverlayClick>
+      <div className="space-y-9">
+        <Text variant="medium" size="sm" leading="4">
+          <span dangerouslySetInnerHTML={{ __html: message }} />
+        </Text>
+        <div className="grid grid-cols-2 gap-x-4">
+          <Button
+            variant="outline-secondary"
+            onClick={() => {
+              setOpen(false);
+              onCancel?.();
+            }}>
+            {cancelText}
+          </Button>
+          <Button variant={okVariant} onClick={onOk}>
+            {okText}
+          </Button>
+        </div>
+      </div>
+    </DialogBookingConfirm>
+  );
+};

package/src/components/organisms/DialogSendingMail/DialogSendingMail.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { DialogBookingConfirm } from '../DialogBookingConfirm';
+import { DialogSendingMailContent } from './DialogSendingMailContent';
+
+export interface DialogSendingMailProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  children: React.ReactNode;
+  type?: 'booking' | 'quotation';
+}
+
+export const DialogSendingMail = (props: DialogSendingMailProps) => {
+  const { open, setOpen, children, type = 'booking' } = props;
+
+  return (
+    <DialogBookingConfirm
+      open={open}
+      title={`Send ${type} via mail`}
+      setOpen={setOpen}
+      className="!max-w-[800px]"
+      closeOnOverlayClick>
+      {children}
+    </DialogBookingConfirm>
+  );
+};
+
+DialogSendingMail.Content = DialogSendingMailContent;

package/src/components/organisms/DialogSendingMail/DialogSendingMailContent.tsx

@@ -0,0 +1,115 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import React, { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import Button from '../../atoms/Button/Button';
+import Input from '../../atoms/Inputs/Input/Input';
+import Textarea from '../../atoms/Inputs/Textarea/Textarea';
+import Toast from '../../molecules/Toast/Toast';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '../../ui/form';
+import { sendingMailSchema, SendingMailSchema } from './sending-mail-schema';
+
+export interface DialogSendingMailContentProps {
+  userInfo: {
+    firstName: string;
+    lastName: string;
+    email: string;
+  };
+  subject: string;
+  type: 'booking' | 'quotation';
+  onSubmit: (data: SendingMailSchema) => void;
+  onPreviewAttachment?: () => void;
+  onCancel?: () => void;
+}
+
+export const DialogSendingMailContent: React.FC<DialogSendingMailContentProps> = (
+  props
+) => {
+  const { userInfo, subject, type, onSubmit, onPreviewAttachment, onCancel } = props;
+
+  const messageText = () => {
+    const name = `${userInfo.firstName} ${userInfo.lastName}`;
+    return `Dear Sir/Madam, \n\nPlease find your ${type} for ${name} attached here with.\nWe remain at your disposal for any questions or further clarification.\n\nKind regards,\nThe Mautourco Team`;
+  };
+
+  const form = useForm<SendingMailSchema>({
+    resolver: zodResolver(sendingMailSchema),
+    defaultValues: {
+      email: userInfo.email,
+      subject,
+      message: messageText(),
+    },
+  });
+
+  useEffect(() => {
+    form.setValue('subject', subject);
+  }, [subject]);
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="space-y-6">
+          <FormField
+            control={form.control}
+            name="email"
+            rules={{ required: true }}
+            render={({ field }) => (
+              <FormItem>
+                <div className="relative">
+                  <FormControl>
+                    <Input type="email" placeholder="Recipient *" {...field} />
+                  </FormControl>
+                  <FormMessage className="absolute bottom-0 translate-y-5" />
+                </div>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="subject"
+            render={({ field }) => (
+              <FormItem>
+                <div className="relative">
+                  <FormControl>
+                    <Input placeholder="Subject" {...field} />
+                  </FormControl>
+                  <FormMessage className="absolute bottom-0 translate-y-5" />
+                </div>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="message"
+            rules={{ required: true }}
+            render={({ field }) => (
+              <FormItem>
+                <div className="relative">
+                  <FormControl>
+                    <Textarea placeholder="Write your email here... *" {...field} />
+                  </FormControl>
+                  <FormMessage className="absolute bottom-0 translate-y-4" />
+                </div>
+              </FormItem>
+            )}
+          />
+          <Button type="button" size="sm" onClick={onPreviewAttachment}>
+            Preview Attachment
+          </Button>
+        </div>
+        <Toast
+          type="warning"
+          className="mt-8"
+          text="Disclaimer: Email formatting may appear distorted in certain older email clients (e.g Outlook Classic ). Content will remain intact, but the visual layout may differ from the original"
+        />
+        <div className="flex justify-end gap-4 [&>*]:w-[250px] pb-2 pt-9">
+          <Button type="button" variant="outline-secondary" size="sm" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button type="submit" variant="secondary" size="sm">
+            Send
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};

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

@@ -0,0 +1,5 @@
+export * from './DialogSendingMail';
+export * from './sending-mail-schema';
+
+export type { DialogSendingMailProps } from './DialogSendingMail';
+export type { DialogSendingMailContentProps } from './DialogSendingMailContent';

package/src/components/organisms/DialogSendingMail/sending-mail-schema.ts

@@ -0,0 +1,19 @@
+import { EMAIL_REGEX } from '@/src/lib/shared-constant';
+import z from 'zod';
+
+export const sendingMailSchema = z.object({
+  email: z
+    .string()
+    .regex(EMAIL_REGEX, {
+      message: 'Please enter a valid email',
+    })
+    .refine((v) => v !== '', {
+      error: 'Email is required',
+    }),
+  subject: z.string().optional(),
+  message: z.string().refine((v) => v !== '', {
+    error: 'Message is required',
+  }),
+});
+
+export type SendingMailSchema = z.infer<typeof sendingMailSchema>;

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

@@ -111,7 +111,7 @@
       &::after {
         content: '';
         position: absolute;
-        inset: -1px;
+        inset: -1px -1px 1px -1px;
         pointer-events: none;
         max-width: 100%;
         background-image:
@@ -192,48 +192,64 @@
 
 .table__total {
   tr {
-    border: 1px solid transparent;
+    border: 1px solid var(--divider-color-default);
+    border-left: none;
+    border-right: none;
     position: relative;
-    &::after {
-      content: '';
-      position: absolute;
-      inset: -1px;
-      pointer-events: none;
-      background-image:
-        repeating-linear-gradient(
-          to right,
-          var(--divider-color-default) 0,
-          var(--divider-color-default) 12px,
-          transparent 12px,
-          transparent 24px
-        ),
-        repeating-linear-gradient(
-          to right,
-          var(--divider-color-default) 0,
-          var(--divider-color-default) 12px,
-          transparent 12px,
-          transparent 24px
-        );
-      background-size:
-        100% 1px,
-        100% 1px;
-      background-position: top, bottom;
-      background-repeat: repeat-x, repeat-x;
-    }
   }
   td {
     padding-block: var(--spacing-padding-px-4);
     &:last-child {
-      width: 160px;
-      @media (min-width: 1680px) {
-        width: var(--last-column-width);
-      }
+      /* width: 160px;*/
+      /* @media (min-width: 1680px) {
+      } */
+      width: var(--last-column-width);
     }
   }
 }
 
+.table__total--dashed tr {
+  border: 1px solid transparent;
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    pointer-events: none;
+    background-image:
+      repeating-linear-gradient(
+        to right,
+        var(--divider-color-default) 0,
+        var(--divider-color-default) 12px,
+        transparent 12px,
+        transparent 24px
+      ),
+      repeating-linear-gradient(
+        to right,
+        var(--divider-color-default) 0,
+        var(--divider-color-default) 12px,
+        transparent 12px,
+        transparent 24px
+      );
+    background-size:
+      100% 1px,
+      100% 1px;
+    background-position: top, bottom;
+    background-repeat: repeat-x, repeat-x;
+  }
+}
+
 .table__row-with-children {
   > td {
     padding: 0;
   }
+  .table__row-nested {
+    border-top: none;
+  }
+  .table .table__nested-wrapper tr {
+    border-top: none;
+    &:last-child {
+      border-bottom: solid 1px var(--color-surface-300);
+    }
+  }
 }

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

@@ -1,3 +1,4 @@
+import { priceFormatter } from '@/src/lib/price-formatter';
 import { cn } from '@/src/lib/utils';
 import { AnimatePresence, domAnimation, LazyMotion } from 'motion/react';
 import * as motion from 'motion/react-m';
@@ -43,6 +44,12 @@ export interface TableProps<T extends TableRowData<T>> {
 
   /** Whether the child rows are visible */
   isGrouped?: boolean;
+
+  /** Whether the total rows are bordered with a dashed border */
+  isTotalBorderDash?: boolean;
+
+  /** Whether the last column is visible */
+  totalSubstractedSpace?: number;
 }
 
 /**
@@ -133,12 +140,21 @@ const NestedContent = <T extends TableRowData<T>>({
  *
  */
 export const Table = <T extends TableRowData<T>>(props: TableProps<T>) => {
-  const { columns, data, pagination, isGrouped, totalRows = {}, onClickRow } = props;
+  const {
+    columns,
+    data,
+    pagination,
+    isGrouped,
+    totalRows = {},
+    isTotalBorderDash = true,
+    totalSubstractedSpace = 10,
+    onClickRow,
+  } = props;
 
   const normalizeLastColumnWidth = () => {
     const width = columns[columns.length - 1].width;
     if (typeof width === 'number') {
-      return `${width - 10}px`;
+      return `${width - totalSubstractedSpace}px`;
     }
     return width;
   };
@@ -248,9 +264,12 @@ export const Table = <T extends TableRowData<T>>(props: TableProps<T>) => {
           </table>
         </div>
         {hasTotal && (
-          <div className="table__total-container">
+          <div className={'table__total-container'}>
             <table className="table">
-              <tbody className="table__total">
+              <tbody
+                className={cn('table__total', {
+                  'table__total--dashed': isTotalBorderDash,
+                })}>
                 <tr>
                   <td colSpan={columns.length - 1}></td>
                   <td
@@ -270,7 +289,7 @@ export const Table = <T extends TableRowData<T>>(props: TableProps<T>) => {
                         {Object.entries(totalRows).map(([currency, total]) => (
                           <div key={currency}>
                             <Text size="md" variant="bold">
-                              {currency} {total}
+                              {priceFormatter(total, currency)}
                             </Text>
                           </div>
                         ))}

package/src/components/organisms/Table/columns/booking-cancel-service-columns.tsx

@@ -1,7 +1,7 @@
 import Button from '@/src/components/atoms/Button/Button';
-import Chip from '@/src/components/atoms/Chip/Chip';
 import { Text } from '@/src/components/atoms/Typography/Typography';
 import { DateDisplay } from '@/src/components/molecules/DateDisplay/DateDisplay';
+import { PaxChips, PaxCount } from '@/src/components/molecules/PaxChips/PaxChips';
 import {
   DetailResumeAccommodation,
   DetailResumeExcursion,
@@ -136,16 +136,17 @@ export const bookingCancelServiceColumns: (params?: {
         return <DateDisplay dates={date} direction="vertical" />;
       },
     },
+
     {
       header: 'No. of pax',
       key: 'Type',
       width: 329,
       cell: (value, raw) => {
-        const pax: Record<'Adult' | 'Teen' | 'Infant' | 'Child', number | undefined> = {
-          Adult: 0,
-          Teen: 0,
-          Infant: 0,
-          Child: 0,
+        const pax: Record<'adult' | 'teen' | 'infant' | 'child', number | undefined> = {
+          adult: 0,
+          teen: 0,
+          infant: 0,
+          child: 0,
         };
 
         switch (value) {
@@ -156,37 +157,20 @@ export const bookingCancelServiceColumns: (params?: {
               | DetailResumeAccommodation
               | DetailResumeExcursion
               | DetailResumeTransfer;
-            pax.Adult = item.AdultCount;
-            pax.Teen = item.TeenCount;
-            pax.Infant = item.InfantCount;
-            pax.Child = item.ChildCount;
+            pax.adult = item.AdultCount;
+            pax.teen = item.TeenCount;
+            pax.infant = item.InfantCount;
+            pax.child = item.ChildCount;
             break;
           case ServiceType.OTHER_SERVICE:
             const otherService = raw as DetailResumeOtherService;
-            pax.Adult = otherService.adult_pax;
-            pax.Teen = otherService.teen_pax;
-            pax.Infant = otherService.infant_pax;
-            pax.Child = otherService.child_pax;
+            pax.adult = otherService.adult_pax;
+            pax.teen = otherService.teen_pax;
+            pax.infant = otherService.infant_pax;
+            pax.child = otherService.child_pax;
             break;
         }
-        return (
-          <div className="flex items-center gap-x-3">
-            {Object.keys(pax).map((k, index) => {
-              const count = pax[k as keyof typeof pax] ?? 0;
-              const type = count > 0 ? 'filled' : 'outline';
-              return (
-                <Chip
-                  key={`pax-${index}`}
-                  label={`${k} ${count}`}
-                  size="sm"
-                  color="accent"
-                  type={type}
-                  className="!px-3"
-                />
-              );
-            })}
-          </div>
-        );
+        return <PaxChips pax={pax as PaxCount} />;
       },
     },
     {

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

@@ -1,8 +1,8 @@
 import Button from '@/src/components/atoms/Button/Button';
-import Chip from '@/src/components/atoms/Chip/Chip';
 import { Text } from '@/src/components/atoms/Typography/Typography';
 import { ActionDropdown } from '@/src/components/molecules/ActionDropdown/ActionDropdown';
 import { DateDisplay } from '@/src/components/molecules/DateDisplay/DateDisplay';
+import { PaxChips } from '@/src/components/molecules/PaxChips/PaxChips';
 import { ActionDropdownType } from '@/src/types/table';
 import { BookingListItem } from '@/src/types/table/booking.types';
 import { ColumnType } from '../TableCell';
@@ -61,24 +61,7 @@ export const bookingColumns: (params: {
       const paxDetails = value as BookingListItem['pax_details'];
       const paxDetailsKeys = Object.keys(paxDetails);
       if (paxDetailsKeys.length) {
-        return (
-          <div className="flex flex-wrap gap-2">
-            {paxDetailsKeys.map((key) => {
-              return (
-                <Chip
-                  label={`${key} ${paxDetails[key as keyof BookingListItem['pax_details']]}`}
-                  type={
-                    paxDetails[key as keyof BookingListItem['pax_details']] > 0
-                      ? 'filled'
-                      : 'outline'
-                  }
-                  color="accent"
-                  size="sm"
-                />
-              );
-            })}
-          </div>
-        );
+        return <PaxChips pax={paxDetails} />;
       }
       return <></>;
     },