@asdp/ferryui 0.1.22-dev.10601 → 0.1.22-dev.10685

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, InfoLabel, Body1, Body1Strong, Caption1, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Spinner, Label, Text, Subtitle1, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Menu, MenuTrigger, MenuPopover, MenuList, Radio, DialogActions, Caption2Strong, Link, Body2, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, typographyStyles, Switch, Textarea } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
-import { ArrowDownloadRegular, Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular } from '@fluentui/react-icons';
+import { ArrowDownloadRegular, Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular, ArrowRightRegular } from '@fluentui/react-icons';
 import { Container, Row, Col, Visible } from 'react-grid-system';
 import { Icon } from '@iconify/react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
@@ -283,6 +283,7 @@ var foundationColors = {
   "Foundation_Danger_error": "#FD3A3A"
 };
 var lightModeColors = {
+  "Neutral_Background_1_Hover": "#f5f5f5",
   "Neutral_Background_2_Hover": "#f0f0f0",
   "Neutral_Background_3_Pressed": "#d6d6d6",
   "Neutral_Foreground_Disabled_Rest": "#bdbdbd",
@@ -14646,22 +14647,22 @@ var CardBookingAddOn = ({
   const styles = useStyles29();
   const mergedLabels = { ...DEFAULT_LABELS28[language], ...labels };
   const addOnRows = [
-    {
+    addOnData?.lounge && {
       key: "lounge",
-      label: addOnData?.lounge?.label || mergedLabels.loungeLabel,
-      price: addOnData?.lounge?.price || mergedLabels.addOnPrice
+      label: addOnData.lounge.label || mergedLabels.loungeLabel,
+      price: addOnData.lounge.price
     },
-    {
+    addOnData?.assurance && {
       key: "assurance",
-      label: addOnData?.assurance?.label || mergedLabels.assuranceLabel,
-      price: addOnData?.assurance?.price || mergedLabels.addOnPrice
+      label: addOnData.assurance.label || mergedLabels.assuranceLabel,
+      price: addOnData.assurance.price
     },
-    {
+    addOnData?.meal && {
       key: "meal",
-      label: addOnData?.meal?.label || mergedLabels.mealLabel,
-      price: addOnData?.meal?.price || mergedLabels.addOnPrice
+      label: addOnData.meal.label || mergedLabels.mealLabel,
+      price: addOnData.meal.price
     }
-  ];
+  ].filter(Boolean);
   return /* @__PURE__ */ jsx("div", { className: `${styles.container} ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: styles.bookingDetail, children: [
     /* @__PURE__ */ jsxs(Card, { className: styles.bookingDetailTop, children: [
       /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.bookingDetails }),
@@ -15680,6 +15681,16 @@ var useStyles34 = makeStyles({
     flexDirection: "column",
     rowGap: tokens.spacingVerticalL
   },
+  passengerList: {
+    display: "flex",
+    flexDirection: "column",
+    rowGap: tokens.spacingVerticalL
+  },
+  passengerListScrollable: {
+    maxHeight: "560px",
+    overflowY: "auto",
+    paddingRight: tokens.spacingHorizontalXS
+  },
   passengerCard: {
     boxShadow: "none",
     border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
@@ -15738,12 +15749,13 @@ var CardReviewPassenger = ({
   const styles = useStyles34();
   const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
   const displayTitle = title || mergedLabels.title;
+  const isScrollable = !isLoading && passengers.length > 5;
   return /* @__PURE__ */ jsx(Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxs(Row, { direction: "column", nogutter: true, className: styles.list, children: [
     /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.titleRow, children: [
       /* @__PURE__ */ jsx(Subtitle1, { children: displayTitle }),
       /* @__PURE__ */ jsx(Divider, { className: styles.titleDivider })
     ] }) }),
-    isLoading ? Array.from({ length: 2 }).map((_, index) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Card, { className: styles.passengerCard, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.passengerRow, children: [
+    /* @__PURE__ */ jsx("div", { className: `${styles.passengerList} ${isScrollable ? styles.passengerListScrollable : ""}`, children: isLoading ? Array.from({ length: 2 }).map((_, index) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Card, { className: styles.passengerCard, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.passengerRow, children: [
       /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs(Skeleton, { children: [
         /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "180px", height: "18px", marginBottom: "8px" } }),
         /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "220px", height: "16px" } })
@@ -15781,7 +15793,7 @@ var CardReviewPassenger = ({
           }
         ) })
       ] }) }) }, passenger.id || index);
-    })
+    }) })
   ] }) });
 };
 
@@ -16827,10 +16839,13 @@ var CardStatusOrder = ({
 var DEFAULT_LABELS40 = {
   id: {
     title: "Rincian Harga",
+    passengerDetailHeader: "Detail Penumpang",
     addonHeader: "Add On",
+    departureFareHeader: "Tarif Keberangkatan",
     subTotalLabel: "Sub Tagihan",
-    totalTagihanLabel: "Total Tagihan",
-    ppnLabel: "PPN (Pajak Pertambahan Nilai) 11%",
+    discountLabel: "Discount Reduksi",
+    totalTagihanLabel: "Total Tagihan (Subtotal - Reduksi)",
+    ppnLabel: "PPN 11%",
     ppnNote: "*PPN 11% dikenakan untuk biaya layanan dan biaya admin",
     grandTotalLabel: "Total Pembayaran",
     currencyPrefix: "Rp.",
@@ -16839,10 +16854,13 @@ var DEFAULT_LABELS40 = {
   },
   en: {
     title: "Price Details",
+    passengerDetailHeader: "Passenger Details",
     addonHeader: "Add On",
+    departureFareHeader: "Departure Fare",
     subTotalLabel: "Sub Total",
-    totalTagihanLabel: "Total Bill",
-    ppnLabel: "VAT (Value Added Tax) 11%",
+    discountLabel: "Discount Reduction",
+    totalTagihanLabel: "Total Bill (Subtotal - Reduction)",
+    ppnLabel: "VAT 11%",
     ppnNote: "*VAT 11% is charged for service fees and admin fees",
     grandTotalLabel: "Total Payment",
     currencyPrefix: "Rp.",
@@ -16863,24 +16881,26 @@ var useStyles42 = makeStyles({
       fontWeight: tokens.fontWeightSemibold
     }
   },
+  cardScrollWrapper: {
+    height: "500px",
+    overflowY: "auto"
+  },
   card: {
     backgroundColor: tokens.colorNeutralBackground1,
-    ...shorthands.border("1px", "solid", tokens.colorNeutralStroke2),
-    ...shorthands.padding(
-      tokens.spacingVerticalXXL,
-      tokens.spacingHorizontalXXL
-    ),
-    boxShadow: "none"
+    ...shorthands.border("1px", "solid", tokens.colorNeutralStroke1),
+    padding: tokens.spacingVerticalL,
+    boxShadow: "none",
+    borderRadius: tokens.borderRadiusXLarge
   },
   content: {
     display: "flex",
     flexDirection: "column",
-    gap: tokens.spacingVerticalL
+    gap: tokens.spacingVerticalS
   },
   section: {
     display: "flex",
     flexDirection: "column",
-    gap: tokens.spacingVerticalS
+    gap: tokens.spacingVerticalL
   },
   row: {
     display: "flex",
@@ -16945,13 +16965,13 @@ var useStyles42 = makeStyles({
   },
   grandTotalLabel: {
     color: "#D13438",
-    fontSize: tokens.fontSizeHero700,
-    fontWeight: tokens.fontWeightSemibold
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: fontWeight.Medium
   },
   grandTotalValue: {
     color: "#D13438",
-    fontSize: tokens.fontSizeHero800,
-    fontWeight: tokens.fontWeightSemibold
+    fontSize: tokens.fontSizeBase500,
+    fontWeight: fontWeight.Medium
   },
   badge: {
     marginLeft: tokens.spacingHorizontalS,
@@ -16959,10 +16979,27 @@ var useStyles42 = makeStyles({
     color: "white"
   },
   divider: {
-    margin: `${tokens.spacingVerticalL} 0`
+    // margin: `${tokens.spacingVerticalL} 0`,
   },
   closeButton: {
     color: tokens.colorNeutralForeground1
+  },
+  headerCard: {
+    backgroundColor: lightModeColors.Neutral_Background_1_Hover,
+    borderRadius: tokens.borderRadiusXLarge,
+    gap: tokens.spacingVerticalMNudge,
+    padding: tokens.spacingVerticalMNudge
+  },
+  badgeRoundTripLilac: {
+    borderRadius: tokens.borderRadiusXLarge,
+    border: `0px solid ${sharedColors.Shared_Lilac_Tint_40}`,
+    backgroundColor: sharedColors.Shared_Lilac_Tint_60,
+    color: sharedColors.Shared_Lilac_Primary
+  },
+  badgeRoundTripOrange: {
+    borderRadius: tokens.borderRadiusXLarge,
+    border: `0px solid ${tokens.colorStatusWarningForeground2}`,
+    color: tokens.colorStatusWarningForeground2
   }
 });
 var ModalPriceDetail = ({
@@ -16970,15 +17007,67 @@ var ModalPriceDetail = ({
   labels,
   isOpen,
   onOpenChange,
+  isRoundTrip = false,
+  vesselType,
+  vesselTypeColor,
   detailItems,
+  departureItems = [],
   addonItems,
   subTotal,
+  discountAmount = 0,
   taxAmount,
   grandTotal,
+  headerInfo,
+  roundTripHeaderInfo,
+  roundTripDetailItems,
+  roundTripDepartureItems,
+  roundTripAddonItems,
+  roundTripSubTotal,
+  roundTripDiscountAmount,
+  roundTripTaxAmount,
+  roundTripGrandTotal,
   ...props
 }) => {
   const styles = useStyles42();
   const mergedLabels = { ...DEFAULT_LABELS40[language], ...labels };
+  const locale = language === "id" ? "id-ID" : "en-US";
+  const formatCurrency = (value) => `${mergedLabels.currencyCode} ${value.toLocaleString(locale)}`;
+  const passengerItemsFromNested = detailItems.flatMap(
+    (item) => item.list ?? []
+  );
+  const passengerItems = passengerItemsFromNested.length > 0 ? passengerItemsFromNested : detailItems;
+  const finalDepartureItems = departureItems.length > 0 ? departureItems : detailItems;
+  const roundTripDetailSource = roundTripDetailItems ?? detailItems;
+  const roundTripPassengerItemsFromNested = roundTripDetailSource.flatMap(
+    (item) => item.list ?? []
+  );
+  const roundTripPassengerItems = roundTripPassengerItemsFromNested.length > 0 ? roundTripPassengerItemsFromNested : roundTripDetailSource;
+  const roundTripFinalDepartureItems = roundTripDepartureItems?.length ? roundTripDepartureItems : roundTripDetailSource;
+  const roundTripAddonSource = roundTripAddonItems ?? addonItems;
+  const totalTagihan = subTotal - discountAmount;
+  const roundTripTotalTagihan = (roundTripSubTotal ?? subTotal) - (roundTripDiscountAmount ?? discountAmount);
+  const modalHeaderInfo = {
+    logoUrl: headerInfo?.logoUrl ?? "/assets/logo/asdp-default.svg",
+    logoAlt: headerInfo?.logoAlt ?? "asdp",
+    vesselName: headerInfo?.vesselName ?? "KMP PORTLINK",
+    vesselType: vesselType ?? headerInfo?.vesselType ?? "Water Taxi",
+    vesselTypeColor: vesselTypeColor ?? headerInfo?.vesselTypeColor ?? "#107C10",
+    departureHarbor: headerInfo?.departureHarbor ?? "Merak, Banten",
+    arrivalHarbor: headerInfo?.arrivalHarbor ?? "Bakauheni, Lampung",
+    vehicleGroupLabel: headerInfo?.vehicleGroupLabel ?? "Golongan IV \u2022 Mobil Penumpang"
+  };
+  const roundTripModalHeaderInfo = {
+    logoUrl: roundTripHeaderInfo?.logoUrl ?? modalHeaderInfo.logoUrl,
+    logoAlt: roundTripHeaderInfo?.logoAlt ?? modalHeaderInfo.logoAlt,
+    vesselName: roundTripHeaderInfo?.vesselName ?? modalHeaderInfo.vesselName,
+    vesselType: roundTripHeaderInfo?.vesselType ?? modalHeaderInfo.vesselType,
+    vesselTypeColor: roundTripHeaderInfo?.vesselTypeColor ?? modalHeaderInfo.vesselTypeColor,
+    departureHarbor: roundTripHeaderInfo?.departureHarbor ?? modalHeaderInfo.departureHarbor,
+    arrivalHarbor: roundTripHeaderInfo?.arrivalHarbor ?? modalHeaderInfo.arrivalHarbor,
+    vehicleGroupLabel: roundTripHeaderInfo?.vehicleGroupLabel ?? modalHeaderInfo.vehicleGroupLabel
+  };
+  const roundTripTaxValue = roundTripTaxAmount ?? taxAmount;
+  const roundTripGrandTotalValue = roundTripGrandTotal ?? grandTotal;
   return /* @__PURE__ */ jsx(
     Dialog,
     {
@@ -17007,111 +17096,460 @@ var ModalPriceDetail = ({
                 ) })
               }
             ) }),
-            children: mergedLabels.title
+            children: /* @__PURE__ */ jsx(Subtitle1, { style: { fontWeight: fontWeight.Medium }, children: mergedLabels.title })
           }
         ),
-        /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: /* @__PURE__ */ jsx(Card, { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
-          detailItems.map((item) => /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-                /* @__PURE__ */ jsx("span", { className: styles.vehicleTitle, children: item.label }),
-                item.badge && /* @__PURE__ */ jsx(
-                  Badge,
+        /* @__PURE__ */ jsxs(DialogContent, { className: styles.content, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.cardScrollWrapper, children: [
+            !isRoundTrip && /* @__PURE__ */ jsx(Card, { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+              /* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.headerCard, children: [
+                /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { children: [
+                  /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: modalHeaderInfo.logoUrl,
+                      width: 35,
+                      height: 24,
+                      alt: modalHeaderInfo.logoAlt
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
+                    Subtitle2,
+                    {
+                      style: { fontWeight: fontWeight.Medium },
+                      children: modalHeaderInfo.vesselName
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      size: "medium",
+                      appearance: "filled",
+                      iconPosition: "before",
+                      shape: "rounded",
+                      style: {
+                        backgroundColor: modalHeaderInfo.vesselTypeColor,
+                        borderRadius: tokens.borderRadiusXLarge
+                      },
+                      children: modalHeaderInfo.vesselType
+                    }
+                  ) })
+                ] }) }),
+                /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(
+                  Row,
                   {
-                    size: "medium",
-                    shape: "rounded",
-                    className: styles.badge,
-                    children: item.badge
+                    nogutter: true,
+                    align: "center",
+                    style: { gap: tokens.spacingHorizontalSNudge },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Body1Stronger,
+                        {
+                          style: {
+                            color: tokens.colorNeutralStrokeAccessible
+                          },
+                          children: modalHeaderInfo.departureHarbor
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(ArrowRightRegular, {}),
+                      /* @__PURE__ */ jsx(
+                        Body1Stronger,
+                        {
+                          style: {
+                            color: tokens.colorNeutralStrokeAccessible
+                          },
+                          children: modalHeaderInfo.arrivalHarbor
+                        }
+                      )
+                    ]
                   }
-                )
+                ) }),
+                /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(
+                  Body1,
+                  {
+                    style: { color: tokens.colorNeutralStrokeAccessible },
+                    children: modalHeaderInfo.vehicleGroupLabel
+                  }
+                ) })
               ] }),
-              /* @__PURE__ */ jsxs("span", { className: styles.priceValue, children: [
-                mergedLabels.currencyPrefix,
-                " ",
-                item.price.toLocaleString(
-                  language === "id" ? "id-ID" : "en-US"
-                )
+              /* @__PURE__ */ jsxs(Row, { nogutter: true, style: { gap: tokens.spacingVerticalMNudge }, children: [
+                /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.passengerDetailHeader }) }),
+                passengerItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                  /* @__PURE__ */ jsx(Body1, { children: item.label }),
+                  /* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
+                ] }) }, item.key))
+              ] }),
+              /* @__PURE__ */ jsx(Divider, {}),
+              addonItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  Row,
+                  {
+                    nogutter: true,
+                    style: { gap: tokens.spacingVerticalMNudge },
+                    children: [
+                      /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.addonHeader }) }),
+                      addonItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                        /* @__PURE__ */ jsx(Body1, { children: item.label }),
+                        /* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
+                      ] }) }, item.key))
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(Divider, {})
+              ] }),
+              /* @__PURE__ */ jsxs(Row, { nogutter: true, style: { gap: tokens.spacingVerticalMNudge }, children: [
+                /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.departureFareHeader }) }),
+                finalDepartureItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                  /* @__PURE__ */ jsx(Body1, { children: item.label }),
+                  /* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
+                ] }) }, item.key))
+              ] }),
+              /* @__PURE__ */ jsx(Divider, {}),
+              /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.subTotalLabel }),
+                /* @__PURE__ */ jsx(Body1Stronger, { children: formatCurrency(subTotal) })
+              ] }),
+              /* @__PURE__ */ jsxs(Row, { nogutter: true, style: { gap: tokens.spacingVerticalS }, children: [
+                /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                  /* @__PURE__ */ jsx(Caption1, { children: mergedLabels.discountLabel }),
+                  /* @__PURE__ */ jsxs(Body1, { children: [
+                    "(-) ",
+                    formatCurrency(discountAmount)
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                  /* @__PURE__ */ jsx(Caption1, { children: mergedLabels.totalTagihanLabel }),
+                  /* @__PURE__ */ jsx(Body1, { children: formatCurrency(totalTagihan) })
+                ] }) }),
+                /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                  /* @__PURE__ */ jsx(Caption1, { children: mergedLabels.ppnLabel }),
+                  /* @__PURE__ */ jsx(Body1, { children: formatCurrency(taxAmount) })
+                ] }) })
               ] })
-            ] }),
-            item.list && item.list.map((subItem) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: styles.passengerDetail,
-                children: [
-                  /* @__PURE__ */ jsx("span", { children: subItem.label }),
-                  /* @__PURE__ */ jsxs("span", { style: { float: "right" }, children: [
-                    mergedLabels.currencyCode,
-                    " ",
-                    item.price.toLocaleString(
-                      language === "id" ? "id-ID" : "en-US"
+            ] }) }),
+            isRoundTrip && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Card, { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+                /* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.headerCard, children: [
+                  /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { children: [
+                    /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: roundTripModalHeaderInfo.logoUrl,
+                        width: 35,
+                        height: 24,
+                        alt: roundTripModalHeaderInfo.logoAlt
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
+                      Subtitle2,
+                      {
+                        style: { fontWeight: fontWeight.Medium },
+                        children: roundTripModalHeaderInfo.vesselName
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        size: "medium",
+                        appearance: "filled",
+                        iconPosition: "before",
+                        shape: "rounded",
+                        style: {
+                          backgroundColor: roundTripModalHeaderInfo.vesselTypeColor,
+                          borderRadius: tokens.borderRadiusXLarge
+                        },
+                        children: roundTripModalHeaderInfo.vesselType
+                      }
+                    ) })
+                  ] }) }),
+                  /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(
+                    Row,
+                    {
+                      nogutter: true,
+                      align: "center",
+                      style: { gap: tokens.spacingHorizontalSNudge },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Body1Stronger,
+                          {
+                            style: {
+                              color: tokens.colorNeutralStrokeAccessible
+                            },
+                            children: roundTripModalHeaderInfo.departureHarbor
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(ArrowRightRegular, {}),
+                        /* @__PURE__ */ jsx(
+                          Body1Stronger,
+                          {
+                            style: {
+                              color: tokens.colorNeutralStrokeAccessible
+                            },
+                            children: roundTripModalHeaderInfo.arrivalHarbor
+                          }
+                        )
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(
+                    Body1,
+                    {
+                      style: {
+                        color: tokens.colorNeutralStrokeAccessible
+                      },
+                      children: roundTripModalHeaderInfo.vehicleGroupLabel
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsx(Row, { nogutter: true, children: /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    size: "extra-large",
+                    appearance: "tint",
+                    shape: "circular",
+                    className: styles.badgeRoundTripLilac,
+                    children: "Pulang Pergi (Keberangkatan)"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(
+                  Row,
+                  {
+                    nogutter: true,
+                    style: { gap: tokens.spacingVerticalMNudge },
+                    children: [
+                      /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.passengerDetailHeader }) }),
+                      roundTripPassengerItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                        /* @__PURE__ */ jsx(Body1, { children: item.label }),
+                        /* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
+                      ] }) }, item.key))
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(Divider, {}),
+                addonItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs(
+                    Row,
+                    {
+                      nogutter: true,
+                      style: { gap: tokens.spacingVerticalMNudge },
+                      children: [
+                        /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.addonHeader }) }),
+                        addonItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                          /* @__PURE__ */ jsx(Body1, { children: item.label }),
+                          /* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
+                        ] }) }, item.key))
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Divider, {})
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  Row,
+                  {
+                    nogutter: true,
+                    style: { gap: tokens.spacingVerticalMNudge },
+                    children: [
+                      /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.departureFareHeader }) }),
+                      finalDepartureItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                        /* @__PURE__ */ jsx(Body1, { children: item.label }),
+                        /* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
+                      ] }) }, item.key))
+                    ]
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx(
+                Card,
+                {
+                  className: styles.card,
+                  style: { marginTop: tokens.spacingVerticalL },
+                  children: /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+                    /* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.headerCard, children: [
+                      /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { children: [
+                        /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: roundTripModalHeaderInfo.logoUrl,
+                            width: 35,
+                            height: 24,
+                            alt: roundTripModalHeaderInfo.logoAlt
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
+                          Subtitle2,
+                          {
+                            style: { fontWeight: fontWeight.Medium },
+                            children: roundTripModalHeaderInfo.vesselName
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
+                          Badge,
+                          {
+                            size: "medium",
+                            appearance: "filled",
+                            iconPosition: "before",
+                            shape: "rounded",
+                            style: {
+                              borderRadius: tokens.borderRadiusXLarge,
+                              backgroundColor: roundTripModalHeaderInfo.vesselTypeColor
+                            },
+                            children: roundTripModalHeaderInfo.vesselType
+                          }
+                        ) })
+                      ] }) }),
+                      /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(
+                        Row,
+                        {
+                          nogutter: true,
+                          align: "center",
+                          style: { gap: tokens.spacingHorizontalSNudge },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              Body1Stronger,
+                              {
+                                style: {
+                                  color: tokens.colorNeutralStrokeAccessible
+                                },
+                                children: roundTripModalHeaderInfo.departureHarbor
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(ArrowRightRegular, {}),
+                            /* @__PURE__ */ jsx(
+                              Body1Stronger,
+                              {
+                                style: {
+                                  color: tokens.colorNeutralStrokeAccessible
+                                },
+                                children: roundTripModalHeaderInfo.arrivalHarbor
+                              }
+                            )
+                          ]
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(
+                        Body1,
+                        {
+                          style: {
+                            color: tokens.colorNeutralStrokeAccessible
+                          },
+                          children: roundTripModalHeaderInfo.vehicleGroupLabel
+                        }
+                      ) })
+                    ] }),
+                    /* @__PURE__ */ jsx(Row, { nogutter: true, children: /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        size: "extra-large",
+                        appearance: "outline",
+                        shape: "circular",
+                        color: "warning",
+                        className: styles.badgeRoundTripOrange,
+                        children: "Pulang Pergi (Kepulangan)"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs(
+                      Row,
+                      {
+                        nogutter: true,
+                        style: { gap: tokens.spacingVerticalMNudge },
+                        children: [
+                          /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.passengerDetailHeader }) }),
+                          roundTripPassengerItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                            /* @__PURE__ */ jsx(Body1, { children: item.label }),
+                            /* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
+                          ] }) }, item.key))
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Divider, {}),
+                    roundTripAddonSource.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs(
+                        Row,
+                        {
+                          nogutter: true,
+                          style: { gap: tokens.spacingVerticalMNudge },
+                          children: [
+                            /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.addonHeader }) }),
+                            roundTripAddonSource.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                              /* @__PURE__ */ jsx(Body1, { children: item.label }),
+                              /* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
+                            ] }) }, item.key))
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Divider, {})
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      Row,
+                      {
+                        nogutter: true,
+                        style: { gap: tokens.spacingVerticalMNudge },
+                        children: [
+                          /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.departureFareHeader }) }),
+                          roundTripFinalDepartureItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                            /* @__PURE__ */ jsx(Body1, { children: item.label }),
+                            /* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
+                          ] }) }, item.key))
+                        ]
+                      }
                     )
                   ] })
-                ]
-              },
-              subItem.key
-            ))
-          ] }, item.key)),
-          addonItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: styles.addonHeader, children: mergedLabels.addonHeader }),
-            addonItems.map((item) => /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
-              /* @__PURE__ */ jsx("span", { className: styles.itemLabel, children: item.label }),
-              /* @__PURE__ */ jsxs("span", { className: styles.priceValue, children: [
-                mergedLabels.currencyCode,
-                " ",
-                item.price.toLocaleString(
-                  language === "id" ? "id-ID" : "en-US"
-                )
-              ] })
-            ] }, item.key))
-          ] }),
-          /* @__PURE__ */ jsx(Divider, { className: styles.divider }),
-          /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
-            /* @__PURE__ */ jsx("span", { className: styles.totalLabel, children: mergedLabels.subTotalLabel }),
-            /* @__PURE__ */ jsxs("span", { className: styles.totalValue, children: [
-              mergedLabels.currencyCode,
-              subTotal.toLocaleString(
-                language === "id" ? "id-ID" : "en-US"
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
-            /* @__PURE__ */ jsx("span", { className: styles.totalTagihanLabel, children: mergedLabels.totalTagihanLabel }),
-            /* @__PURE__ */ jsxs("span", { className: styles.totalTagihanValue, children: [
-              mergedLabels.currencyCode,
-              subTotal.toLocaleString(
-                language === "id" ? "id-ID" : "en-US"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Row,
+                {
+                  nogutter: true,
+                  style: {
+                    gap: tokens.spacingVerticalL,
+                    marginTop: tokens.spacingVerticalL
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                      /* @__PURE__ */ jsx(Caption1, { children: mergedLabels.subTotalLabel }),
+                      /* @__PURE__ */ jsx(Body1, { children: formatCurrency(roundTripSubTotal ?? subTotal) })
+                    ] }) }),
+                    /* @__PURE__ */ jsx(Divider, {}),
+                    /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, style: { gap: tokens.spacingVerticalS }, children: [
+                      /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                        /* @__PURE__ */ jsx(Caption1, { children: mergedLabels.discountLabel }),
+                        /* @__PURE__ */ jsxs(Body1, { children: [
+                          "(-)",
+                          " ",
+                          formatCurrency(
+                            roundTripDiscountAmount ?? discountAmount
+                          )
+                        ] })
+                      ] }) }),
+                      /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                        /* @__PURE__ */ jsx(Caption1, { children: mergedLabels.totalTagihanLabel }),
+                        /* @__PURE__ */ jsx(Body1, { children: formatCurrency(roundTripTotalTagihan) })
+                      ] }) }),
+                      /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
+                        /* @__PURE__ */ jsx(Caption1, { children: mergedLabels.ppnLabel }),
+                        /* @__PURE__ */ jsx(Body1, { children: formatCurrency(roundTripTaxValue) })
+                      ] }) })
+                    ] }) })
+                  ]
+                }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { style: { marginTop: tokens.spacingVerticalL }, children: [
-            /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
-              /* @__PURE__ */ jsx("span", { className: styles.ppnLabel, children: mergedLabels.ppnLabel }),
-              /* @__PURE__ */ jsxs("span", { className: styles.ppnValue, children: [
-                mergedLabels.currencyCode,
-                taxAmount.toLocaleString(
-                  language === "id" ? "id-ID" : "en-US"
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: styles.ppnNote, children: mergedLabels.ppnNote })
-          ] }),
           /* @__PURE__ */ jsxs(
             "div",
             {
               className: styles.row,
               style: { marginTop: tokens.spacingVerticalXXL },
               children: [
-                /* @__PURE__ */ jsx("span", { className: styles.grandTotalLabel, children: mergedLabels.grandTotalLabel }),
-                /* @__PURE__ */ jsxs("span", { className: styles.grandTotalValue, children: [
+                /* @__PURE__ */ jsx(Body1Strong, { className: styles.grandTotalLabel, children: mergedLabels.grandTotalLabel }),
+                /* @__PURE__ */ jsxs(Subtitle1, { className: styles.grandTotalValue, children: [
                   mergedLabels.currencyPrefix,
-                  grandTotal.toLocaleString(
-                    language === "id" ? "id-ID" : "en-US"
-                  )
+                  (isRoundTrip ? roundTripGrandTotalValue : grandTotal).toLocaleString(locale)
                 ] })
               ]
             }
           )
-        ] }) }) })
+        ] })
       ] }) })
     }
   );