@asdp/ferryui 0.1.22-dev.10162 → 0.1.22-dev.10167

package/dist/index.js

@@ -5476,7 +5476,7 @@ var DEFAULT_LABELS8 = {
   id: {
     fromLabel: "Dari",
     toLabel: "Ke",
-    departureDateLabel: "Tanggal Berangkat",
+    departureDateLabel: "Tanggal Pergi",
     returnDateLabel: "Tanggal Pulang",
     serviceClassLabel: "Jenis Layanan",
     typeOfServiceLabel: "Jenis Penumpang",
@@ -5485,14 +5485,14 @@ var DEFAULT_LABELS8 = {
     searchButton: "Cari Tiket",
     placeholderPort: "Pilih Pelabuhan Asal",
     placeholderDestinationPort: "Pilih Pelabuhan Tujuan",
-    placeholderDepartureDate: "Pilih Tanggal Keberangkatan",
-    placeholderReturnDate: "Pilih Tanggal Kepulangan",
+    placeholderDepartureDate: "Pilih Tanggal Pergi",
+    placeholderReturnDate: "Pilih Tanggal Pulang",
     placeholderTypeClass: "Pilih Jenis Layanan",
     placeholderTypeService: "Pilih Jenis Penumpang",
     placeholderPassenger: "Pilih Jumlah Penumpang",
     errorOriginRequired: "Pelabuhan asal wajib diisi",
     errorDestinationRequired: "Pelabuhan tujuan wajib diisi",
-    errorDepartureDateRequired: "Tanggal Berangkat wajib diisi",
+    errorDepartureDateRequired: "Tanggal Pergi wajib diisi",
     errorReturnDateRequired: "Tanggal Pulang wajib diisi",
     switchAriaLabel: "Tukar asal dan tujuan",
     ferryDescription: "Layanan Penyeberangan Ferry ASDP",
@@ -6182,7 +6182,8 @@ var DEFAULT_LABELS9 = {
   id: {
     originHarbor: "Pelabuhan Keberangkatan",
     destinationHarbor: "Pelabuhan Tujuan",
-    departureDate: "Tanggal Keberangkatan",
+    departureDate: "Tanggal Pergi",
+    returnDate: "Tanggal Pulang",
     serviceClass: "Jenis Layanan",
     typeOfService: "Jenis Penumpang",
     totalPassengers: "Jumlah Penumpang",
@@ -6193,6 +6194,7 @@ var DEFAULT_LABELS9 = {
     originHarbor: "Departure Port",
     destinationHarbor: "Destination Port",
     departureDate: "Departure Date",
+    returnDate: "Return Date",
     serviceClass: "Service Type",
     typeOfService: "Type Of Passenger",
     totalPassengers: "Total Passengers",
@@ -6270,10 +6272,12 @@ var useStyles10 = reactComponents.makeStyles({
   }
 });
 var CardTicketSearchSummary = ({
+  showReturnDate = false,
   language = "id",
   originHarbor,
   destinationHarbor,
   departureDate,
+  returnDate,
   serviceClass,
   typeOfService,
   totalPassengers,
@@ -6469,8 +6473,8 @@ var CardTicketSearchSummary = ({
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   RenderField,
                   {
-                    label: mergedLabels.departureDate,
-                    value: departureDate,
+                    label: showReturnDate ? mergedLabels.returnDate : mergedLabels.departureDate,
+                    value: showReturnDate ? returnDate : departureDate,
                     icon: "fluent:calendar-24-regular"
                   }
                 )
@@ -7341,6 +7345,10 @@ var ModalSelectDate = ({
 }) => {
   const styles = useStyles13();
   const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
+  const isSameCalendarDay = (first, second) => {
+    if (!first || !second) return false;
+    return moment__default.default(first).isSame(second, "day");
+  };
   React.useEffect(() => {
     moment__default.default.locale(language === "id" ? "id" : "en");
   }, [language]);
@@ -7352,24 +7360,26 @@ var ModalSelectDate = ({
   );
   const [hoveredDate, setHoveredDate] = React.useState();
   const [activeTab, setActiveTab] = React.useState(initialTab);
-  const previewEndDate = React.useMemo(() => {
-    if (selectedEndDate) return selectedEndDate;
-    if (selectedDate && hoveredDate && hoveredDate > selectedDate) {
-      return hoveredDate;
+  const previewRange = React.useMemo(() => {
+    if (selectedEndDate) {
+      return { start: selectedDate, end: selectedEndDate };
     }
-    return void 0;
+    if (selectedDate && hoveredDate && !isSameCalendarDay(hoveredDate, selectedDate)) {
+      const earlier = hoveredDate < selectedDate ? hoveredDate : selectedDate;
+      const later = hoveredDate > selectedDate ? hoveredDate : selectedDate;
+      return { start: earlier, end: later };
+    }
+    return { start: selectedDate, end: void 0 };
   }, [hoveredDate, selectedDate, selectedEndDate]);
-  const isSameCalendarDay = (first, second) => {
-    if (!first || !second) return false;
-    return moment__default.default(first).isSame(second, "day");
-  };
+  const prevOpenRef = React.useRef(false);
   React.useEffect(() => {
-    if (open) {
+    if (open && !prevOpenRef.current) {
       setSelectedDate(selectedDepartureDate);
       setSelectedEndDate(selectedReturnDate);
       setActiveTab(initialTab);
       setHoveredDate(void 0);
     }
+    prevOpenRef.current = open;
   }, [open, selectedDepartureDate, selectedReturnDate, initialTab]);
   const handleTabChange = (tab) => {
     setActiveTab(tab);
@@ -7393,18 +7403,19 @@ var ModalSelectDate = ({
         setHoveredDate(void 0);
         onSelectDepartureDate(date);
       } else {
-        if (date < currentStart) {
-          setSelectedEndDate(currentStart);
+        const earlier = date < currentStart ? date : currentStart;
+        const later = date > currentStart ? date : currentStart;
+        if (isSameCalendarDay(date, currentStart)) {
           setSelectedDate(date);
-          onSelectDepartureDate(date);
-          if (onSelectReturnDate) {
-            onSelectReturnDate(currentStart);
-          }
-        } else {
-          setSelectedEndDate(date);
-          if (onSelectReturnDate) {
-            onSelectReturnDate(date);
-          }
+          setSelectedEndDate(void 0);
+          setHoveredDate(void 0);
+          return;
+        }
+        setSelectedDate(earlier);
+        setSelectedEndDate(later);
+        onSelectDepartureDate(earlier);
+        if (onSelectReturnDate) {
+          onSelectReturnDate(later);
         }
         setHoveredDate(void 0);
         handleClose();
@@ -7437,14 +7448,15 @@ var ModalSelectDate = ({
         element.onmouseleave = null;
         return;
       }
-      const endDateForVisual = previewEndDate;
-      const startTime = selectedDate.getTime();
-      const endTime = endDateForVisual?.getTime();
+      const rangeStart = previewRange.start;
+      const rangeEnd = previewRange.end;
+      const startTime = rangeStart?.getTime();
+      const endTime = rangeEnd?.getTime();
       const currentTime = date.getTime();
-      const isSameStartEnd = isSameCalendarDay(endDateForVisual, selectedDate);
-      const isStartDay = isSameCalendarDay(date, selectedDate);
-      const isEndDay = isSameCalendarDay(date, endDateForVisual);
-      if (isStartDay && (!endDateForVisual || isSameStartEnd)) {
+      const isSameStartEnd = isSameCalendarDay(rangeStart, rangeEnd);
+      const isStartDay = isSameCalendarDay(date, rangeStart);
+      const isEndDay = isSameCalendarDay(date, rangeEnd);
+      if (isStartDay && (!rangeEnd || isSameStartEnd)) {
         addTokens(styles.rangeSingle);
       } else {
         if (isStartDay) {
@@ -7454,12 +7466,11 @@ var ModalSelectDate = ({
           addTokens(styles.rangeEnd);
         }
       }
-      if (endTime && currentTime > startTime && currentTime < endTime) {
+      if (startTime && endTime && currentTime > startTime && currentTime < endTime) {
         addTokens(selectedEndDate ? styles.rangeMiddle : styles.rangePreview);
       }
       if (!selectedEndDate) {
         element.onmouseenter = () => {
-          if (date < selectedDate) return;
           setHoveredDate((prev) => {
             if (isSameCalendarDay(prev, date)) {
               return prev;
@@ -7477,7 +7488,7 @@ var ModalSelectDate = ({
     },
     [
       activeTab,
-      previewEndDate,
+      previewRange,
       selectedDate,
       selectedEndDate,
       styles.rangeEnd,
@@ -8857,8 +8868,8 @@ var DEFAULT_LABELS16 = {
     recommendation: "Rekomendasi",
     highestPrice: "Harga Tertinggi",
     lowestPrice: "Harga Terendah",
-    earliestDeparture: "Keberangkatan Paling Awal",
-    latestDeparture: "Keberangkatan Paling Akhir",
+    earliestDeparture: "Pergi Paling Awal",
+    latestDeparture: "Pergi Paling Akhir",
     resetSortAriaLabel: "Hapus pengurutan"
   },
   en: {
@@ -8884,8 +8895,8 @@ var DEFAULT_SORT_OPTIONS = [
   { value: "recommended", sortBy: "recommendation", sortDir: "ASC", label: "Rekomendasi" },
   { value: "price-desc", sortBy: "price", sortDir: "DESC", label: "Harga Tertinggi" },
   { value: "price-asc", sortBy: "price", sortDir: "ASC", label: "Harga Terendah" },
-  { value: "departure-asc", sortBy: "departure", sortDir: "ASC", label: "Keberangkatan Paling Awal" },
-  { value: "departure-desc", sortBy: "departure", sortDir: "DESC", label: "Keberangkatan Paling Akhir" }
+  { value: "departure-asc", sortBy: "departure", sortDir: "ASC", label: "Pergi Paling Awal" },
+  { value: "departure-desc", sortBy: "departure", sortDir: "DESC", label: "Pergi Paling Akhir" }
 ];
 var getSortLabel = (value) => {
   const option = DEFAULT_SORT_OPTIONS.find((opt) => opt.value === value);
@@ -9780,9 +9791,9 @@ var DEFAULT_LABELS19 = {
     toLabel: "Ke",
     toPlaceholder: "Pilih pelabuhan tujuan",
     toRequired: "Pelabuhan tujuan wajib diisi",
-    departureDateLabel: "Tanggal Berangkat",
-    departureDatePlaceholder: "Pilih Tanggal Berangkat",
-    departureDateRequired: "Tanggal Berangkat wajib diisi",
+    departureDateLabel: "Tanggal Pergi",
+    departureDatePlaceholder: "Pilih Tanggal Pergi",
+    departureDateRequired: "Tanggal Pergi wajib diisi",
     roundTripLabel: "Pulang Pergi",
     returnDateLabel: "Tanggal Pulang",
     returnDatePlaceholder: "Pilih Tanggal Pulang",
@@ -13836,19 +13847,21 @@ var CardBookingTicket = ({
     /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.bookingDetailBottom, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.totalPrice, children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.totalPriceLabel }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Title3, { className: styles.priceText, children: [
-          mergedLabels.currencySymbol,
-          " ",
-          totalPrice
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react.Icon,
-          {
-            icon: "fluent:chevron-down-24-filled",
-            onClick: onPriceDetailClick,
-            style: { cursor: "pointer" }
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: reactComponents.tokens.spacingHorizontalL, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Title3, { className: styles.priceText, children: [
+            mergedLabels.currencySymbol,
+            " ",
+            totalPrice
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.Icon,
+            {
+              icon: "fluent:chevron-down-24-filled",
+              onClick: onPriceDetailClick,
+              style: { cursor: "pointer" }
+            }
+          )
+        ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.gapButton, children: [
         !(paymentStep === "pay") && /* @__PURE__ */ jsxRuntime.jsx(
@@ -14409,7 +14422,7 @@ var CardAddon = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mealActions, children: [
+        mealData.showActions !== false && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mealActions, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.qtySelector, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               reactComponents.Button,
@@ -14767,8 +14780,9 @@ var useStyles32 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
-    boxShadow: reactComponents.tokens.shadow4,
-    zIndex: 3
+    boxShadow: "none",
+    zIndex: 3,
+    border: `${reactComponents.tokens.strokeWidthThin} solid ${reactComponents.tokens.colorNeutralStroke1}`
   },
   headerContainer: {
     display: "flex",
@@ -14874,93 +14888,69 @@ var DEFAULT_LABELS32 = {
 };
 var useStyles33 = reactComponents.makeStyles({
   card: {
-    padding: "1.5rem",
+    boxShadow: "none",
+    border: `${reactComponents.tokens.strokeWidthThin} solid ${reactComponents.tokens.colorNeutralStroke1}`,
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
-    boxShadow: reactComponents.tokens.shadow4,
-    zIndex: 3
+    padding: `${reactComponents.tokens.spacingHorizontalL} ${reactComponents.tokens.spacingHorizontalXXL}`
   },
-  headerContainer: {
+  titleRow: {
     display: "flex",
     alignItems: "center",
-    marginBottom: "1rem",
-    gap: "1rem"
-  },
-  headerTitle: {
-    whiteSpace: "nowrap",
-    fontWeight: reactComponents.tokens.fontWeightSemibold
+    gap: reactComponents.tokens.spacingHorizontalS
   },
-  headerLine: {
-    height: "1px",
-    flexGrow: 1,
-    backgroundColor: reactComponents.tokens.colorNeutralStroke2
+  titleDivider: {
+    flex: 1
   },
-  contentContainer: {
+  list: {
     display: "flex",
-    flexDirection: "column"
+    flexDirection: "column",
+    rowGap: reactComponents.tokens.spacingVerticalL
   },
-  passengerItem: {
+  passengerCard: {
+    boxShadow: "none",
+    border: `${reactComponents.tokens.strokeWidthThin} solid ${reactComponents.tokens.colorNeutralStroke1}`,
+    borderRadius: reactComponents.tokens.borderRadius3XLarge,
+    padding: reactComponents.tokens.spacingHorizontalL
+  },
+  passengerRow: {
+    width: "100%",
+    alignItems: "center"
+  },
+  passengerInfo: {
     display: "flex",
     flexDirection: "column",
-    gap: reactComponents.tokens.spacingVerticalS,
-    paddingBottom: reactComponents.tokens.spacingVerticalL,
-    paddingTop: reactComponents.tokens.spacingVerticalM,
-    borderBottom: `1px solid ${reactComponents.tokens.colorNeutralStroke2}`,
-    ":last-child": {
-      borderBottom: "none",
-      paddingBottom: 0
-    }
-    // Matches styles.passengerItem in Review.tsx
+    gap: reactComponents.tokens.spacingVerticalXXS
   },
-  itemHeader: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: reactComponents.tokens.spacingVerticalS
+  passengerName: {
+    color: reactComponents.tokens.colorNeutralForeground1
   },
-  name: {
-    color: "#00B8D4",
-    // Cyan color from design
-    fontSize: reactComponents.tokens.fontSizeBase400
+  passengerMeta: {
+    color: reactComponents.tokens.colorNeutralForeground2
   },
-  // Badge Styles
   badgeContainer: {
-    display: "flex",
-    alignItems: "center",
-    position: "relative"
-  },
-  badgeContent: {
-    display: "flex",
+    display: "inline-flex",
     alignItems: "center",
-    padding: "0.25rem 0.75rem 0.25rem 1.5rem",
-    // Extra left padding for the icon overlap
-    borderRadius: "0 4px 4px 0",
-    borderTopRightRadius: "9999px",
-    borderBottomRightRadius: "9999px",
-    color: "white",
-    fontSize: reactComponents.tokens.fontSizeBase200,
-    fontWeight: reactComponents.tokens.fontWeightMedium,
-    marginLeft: "-14px",
-    // Pull the text container under the icon
-    minHeight: "24px"
+    overflow: "hidden",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    minHeight: "32px",
+    boxShadow: reactComponents.tokens.shadow2
   },
   badgeIcon: {
-    width: "28px",
+    width: "32px",
     height: "32px",
-    zIndex: 1,
-    filter: "drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))"
-  },
-  fields: {
-    display: "grid",
-    gridTemplateColumns: "1fr 1fr",
-    gap: reactComponents.tokens.spacingHorizontalL
+    objectFit: "cover",
+    flexShrink: 0,
+    display: "block"
   },
-  inputBox: {
-    border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
-    borderRadius: reactComponents.tokens.borderRadiusMedium,
-    padding: `${reactComponents.tokens.spacingVerticalS} ${reactComponents.tokens.spacingHorizontalM}`,
-    display: "flex",
+  badgeContent: {
+    display: "inline-flex",
     alignItems: "center",
-    height: "32px"
+    minHeight: "32px",
+    padding: `0 ${reactComponents.tokens.spacingHorizontalM}`,
+    color: reactComponents.tokens.colorNeutralForegroundOnBrand,
+    fontSize: reactComponents.tokens.fontSizeBase200,
+    fontWeight: reactComponents.tokens.fontWeightSemibold,
+    whiteSpace: "nowrap"
   }
 });
 var CardReviewPassenger = ({
@@ -14973,48 +14963,140 @@ var CardReviewPassenger = ({
   const styles = useStyles33();
   const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
   const displayTitle = title || mergedLabels.title;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.headerTitle, children: displayTitle }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerLine })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.contentContainer, children: passengers.map((passenger, index) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { direction: "column", nogutter: true, className: styles.list, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.titleRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: displayTitle }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.titleDivider })
+    ] }) }),
+    passengers.map((passenger, index) => {
       const badgeConfig = getBadgeConfig(passenger.serviceClass);
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.passengerItem, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.itemHeader, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: styles.name, children: passenger.name }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.badgeContainer, children: [
-            badgeConfig.icon && /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.Image,
-              {
-                src: badgeConfig.icon,
-                alt: passenger.ticketClass,
-                className: styles.badgeIcon,
-                height: 28,
-                width: 24
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: styles.badgeContent,
-                style: { backgroundColor: badgeConfig.color },
-                children: passenger.ticketClass
-              }
-            )
-          ] })
+      const passengerMeta = `${passenger.ageLabel} \xB7 ${mergedLabels.idNumber} ${passenger.identityNumber}`;
+      return /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: styles.passengerCard, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.passengerRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.passengerInfo, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: styles.passengerName, children: passenger.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.passengerMeta, children: passengerMeta })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: styles.badgeContainer,
+            style: { backgroundColor: badgeConfig.color },
+            children: [
+              badgeConfig.icon ? /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: badgeConfig.icon,
+                  alt: passenger.ticketClass,
+                  className: styles.badgeIcon
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.badgeContent, children: passenger.ticketClass })
+            ]
+          }
+        ) })
+      ] }) }) }, passenger.id || index);
+    })
+  ] }) });
+};
+
+// src/components/CardReviewDetail/CardReviewDetail.constants.ts
+var DEFAULT_LABELS33 = {
+  id: {
+    title: "Detail Pemesanan",
+    fromLabel: "Dari",
+    toLabel: "Ke",
+    scheduleLabel: "Jadwal Masuk",
+    bookingNameLabel: "Nama Pemesanan",
+    passengerTypeLabel: "Jenis Penumpang",
+    addOnLabel: "Add On",
+    viewDetail: "Lihat Detail"
+  },
+  en: {
+    title: "Booking Details",
+    fromLabel: "From",
+    toLabel: "To",
+    scheduleLabel: "Entry Schedule",
+    bookingNameLabel: "Booking Name",
+    passengerTypeLabel: "Passenger Type",
+    addOnLabel: "Add On",
+    viewDetail: "View Details"
+  }
+};
+var useStyles34 = reactComponents.makeStyles({
+  card: {
+    boxShadow: "none",
+    border: `${reactComponents.tokens.strokeWidthThin} solid ${reactComponents.tokens.colorNeutralStroke1}`,
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    padding: `${reactComponents.tokens.spacingHorizontalL} ${reactComponents.tokens.spacingHorizontalXXL}`
+  },
+  titleRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: reactComponents.tokens.spacingHorizontalS
+  },
+  fieldRow: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: reactComponents.tokens.spacingHorizontalL
+  },
+  addOnRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%"
+  }
+});
+var CardReviewDetail = ({
+  language = "id",
+  labels,
+  from,
+  to,
+  scheduleTime,
+  bookingName,
+  passengerType,
+  addOnsCount,
+  onViewAddOns,
+  className
+}) => {
+  const styles = useStyles34();
+  const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
+  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, direction: "column", style: { gap: reactComponents.tokens.spacingHorizontalL }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.titleRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.title }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { style: { width: 0 } })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.fieldRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.fromLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: from }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.toLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: to }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.fieldRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.scheduleLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: scheduleTime }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.bookingNameLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: bookingName }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.fieldRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.passengerTypeLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: passengerType }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.addOnLabel, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.addOnRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Strong, { children: [
+          addOnsCount,
+          " ",
+          addOnsCount === 1 ? "Layanan" : "Layanan"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fields, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.idNumber, size: "small", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.inputBox, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: passenger.identityNumber }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: passenger.ageLabel, size: "small", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.inputBox, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: passenger.ageValue }) }) })
-        ] })
-      ] }, passenger.id || index);
-    }) })
-  ] });
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Button,
+          {
+            appearance: "transparent",
+            onClick: onViewAddOns,
+            style: { color: brandColors[80] },
+            children: mergedLabels.viewDetail
+          }
+        )
+      ] }) }) })
+    ] }) })
+  ] }) });
 };
 
 // src/components/CardPriceDetails/CardPriceDetails.constants.ts
-var DEFAULT_LABELS33 = {
+var DEFAULT_LABELS34 = {
   id: {
     defaultTitle: "Rincian Harga",
     totalPayment: "Total Pembayaran",
@@ -15050,7 +15132,7 @@ var DEFAULT_LABELS33 = {
     currencyPrefix: "Rp. "
   }
 };
-var useStyles34 = reactComponents.makeStyles({
+var useStyles35 = reactComponents.makeStyles({
   list: {
     margin: 0,
     padding: 0,
@@ -15072,7 +15154,7 @@ var PriceDetailsTerms = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles34();
+  const styles = useStyles35();
   const linkColor = reactComponents.tokens.colorBrandBackground;
   const bookingTerms = labels.bookingTerms;
   const agreementTerms = [
@@ -15092,7 +15174,7 @@ var PriceDetailsTerms = ({
     ] })
   ] });
 };
-var useStyles35 = reactComponents.makeStyles({
+var useStyles36 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -15169,8 +15251,8 @@ var CardPriceDetails = ({
   total,
   labels
 }) => {
-  const styles = useStyles35();
-  const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
+  const styles = useStyles36();
+  const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
   const displayTitle = title || mergedLabels.defaultTitle;
   const getVariantClass = (variant) => {
     switch (variant) {
@@ -15229,7 +15311,7 @@ var CardPriceDetails = ({
 };
 
 // src/components/CardPaymentMethodList/CardPaymentMethodList.constants.ts
-var DEFAULT_LABELS34 = {
+var DEFAULT_LABELS35 = {
   id: {
     selectAriaLabel: "Pilih metode pembayaran"
   },
@@ -15237,7 +15319,7 @@ var DEFAULT_LABELS34 = {
     selectAriaLabel: "Select payment method"
   }
 };
-var useStyles36 = reactComponents.makeStyles({
+var useStyles37 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -15297,8 +15379,8 @@ var CardPaymentMethodList = ({
   selectedValue,
   onSelect
 }) => {
-  const styles = useStyles36();
-  const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
+  const styles = useStyles37();
+  const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.container}`, children: methods.map((category, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}) }),
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionItem, { value: category.value, children: [
@@ -15347,7 +15429,7 @@ var CardPaymentMethodList = ({
 };
 
 // src/components/CardPaymentGuide/CardPaymentGuide.constants.ts
-var DEFAULT_LABELS35 = {
+var DEFAULT_LABELS36 = {
   id: {
     title: "Cara Pembayaran"
   },
@@ -15355,7 +15437,7 @@ var DEFAULT_LABELS35 = {
     title: "Payment Method"
   }
 };
-var useStyles37 = reactComponents.makeStyles({
+var useStyles38 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -15391,8 +15473,8 @@ var CardPaymentGuide = ({
   guides,
   className
 }) => {
-  const styles = useStyles37();
-  const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
+  const styles = useStyles38();
+  const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     displayTitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.titleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.title, children: displayTitle }) }),
@@ -15411,7 +15493,7 @@ var CardPaymentGuide = ({
 };
 
 // src/components/CardPaymentInfo/CardPaymentInfo.constants.ts
-var DEFAULT_LABELS36 = {
+var DEFAULT_LABELS37 = {
   id: {
     expiryPrefix: "Kode virtual akun berlaku sampai",
     copyCodeButton: "Salin Kode",
@@ -15431,7 +15513,7 @@ var DEFAULT_LABELS36 = {
     changePayment: "Change Payment Method"
   }
 };
-var useStyles38 = reactComponents.makeStyles({
+var useStyles39 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -15523,8 +15605,8 @@ var CardPaymentInfo = ({
   onCheckStatus,
   onChangePayment
 }) => {
-  const styles = useStyles38();
-  const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
+  const styles = useStyles39();
+  const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.expiryPrefix }),
@@ -15596,7 +15678,7 @@ var CardPaymentInfo = ({
 };
 
 // src/components/CardStatusOrder/CardStatusOrder.constants.ts
-var DEFAULT_LABELS37 = {
+var DEFAULT_LABELS38 = {
   id: {
     detailTitle: "Detail Pemesanan",
     statusLabel: "Status",
@@ -15626,7 +15708,7 @@ var DEFAULT_LABELS37 = {
     illustrationAlt: "E-Ticket Illustration"
   }
 };
-var useStyles39 = reactComponents.makeStyles({
+var useStyles40 = reactComponents.makeStyles({
   activeCard: {
     width: "100%",
     // padding: tokens.spacingHorizontalNone, // default
@@ -15696,8 +15778,8 @@ var CardStatusOrder = ({
   onClickViewTicket,
   className
 }) => {
-  const styles = useStyles39();
-  const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
+  const styles = useStyles40();
+  const mergedLabels = { ...DEFAULT_LABELS38[language], ...labels };
   const displayStatus = statusLabel || mergedLabels.defaultStatus;
   const displayTitle = title || mergedLabels.defaultTitle;
   const displayDescription = description || mergedLabels.defaultDescription;
@@ -15794,7 +15876,7 @@ var CardStatusOrder = ({
 };
 
 // src/components/ModalPriceDetail/ModalPriceDetail.constants.ts
-var DEFAULT_LABELS38 = {
+var DEFAULT_LABELS39 = {
   id: {
     title: "Rincian Harga",
     addonHeader: "Add On",
@@ -15820,7 +15902,7 @@ var DEFAULT_LABELS38 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles40 = reactComponents.makeStyles({
+var useStyles41 = reactComponents.makeStyles({
   surface: {
     width: "680px",
     maxWidth: "90vw",
@@ -15947,8 +16029,8 @@ var ModalPriceDetail = ({
   grandTotal,
   ...props
 }) => {
-  const styles = useStyles40();
-  const mergedLabels = { ...DEFAULT_LABELS38[language], ...labels };
+  const styles = useStyles41();
+  const mergedLabels = { ...DEFAULT_LABELS39[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactComponents.Dialog,
     {
@@ -16090,7 +16172,7 @@ var ModalPriceDetail = ({
 // src/components/FileUpload/FileUpload.constants.ts
 var ACCEPTED_FILES = ".pdf,.jpg,.jpeg,.png";
 var MAX_FILE_SIZE_MB = 10;
-var DEFAULT_LABELS39 = {
+var DEFAULT_LABELS40 = {
   id: {
     placeholder: "Ketuk untuk pilih file",
     maxSizeWarning: "Maksimal {maxSize}MB per file dalam format PDF, JPG, JPEG, PNG.",
@@ -16108,7 +16190,7 @@ var DEFAULT_LABELS39 = {
     downloadTemplateDocument: "Download Template Document"
   }
 };
-var useStyles41 = reactComponents.makeStyles({
+var useStyles42 = reactComponents.makeStyles({
   surface: {
     maxWidth: "90vw",
     maxHeight: "90vh",
@@ -16135,7 +16217,7 @@ var ModalPreviewImage = ({
   imageUrl,
   alt = "Preview"
 }) => {
-  const styles = useStyles41();
+  const styles = useStyles42();
   return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Dialog, { open, onOpenChange: (_, data) => onOpenChange(data.open), children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.surface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactComponents.DialogTitle,
@@ -16261,7 +16343,7 @@ var FileUpload = React__default.default.forwardRef(
     downloadTemplateDocument = false,
     infoLabel
   }, ref) => {
-    const mergedLabels = { ...DEFAULT_LABELS39[language], ...customLabels };
+    const mergedLabels = { ...DEFAULT_LABELS40[language], ...customLabels };
     const styles = uploadStyles();
     const fileInputRef = React.useRef(null);
     const [, setIsDragOver] = React.useState(false);
@@ -16698,11 +16780,11 @@ function hexToRgba(hex, alpha = 1) {
 }
 
 // src/components/CardProfileMenu/CardProfileMenu.constants.ts
-var DEFAULT_LABELS40 = {
+var DEFAULT_LABELS41 = {
   id: {},
   en: {}
 };
-var useStyles42 = reactComponents.makeStyles({
+var useStyles43 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -16762,8 +16844,8 @@ var CardProfileMenu = ({
   selectedValue,
   onTabSelect
 }) => {
-  const styles = useStyles42();
-  ({ ...DEFAULT_LABELS40[language], ...labels });
+  const styles = useStyles43();
+  ({ ...DEFAULT_LABELS41[language], ...labels });
   const handleTabSelect = (_, data) => {
     onTabSelect(data.value);
   };
@@ -16812,6 +16894,7 @@ exports.CardPriceDetails = CardPriceDetails;
 exports.CardProfileMenu = CardProfileMenu;
 exports.CardPromo = CardPromo;
 exports.CardReview = CardReview;
+exports.CardReviewDetail = CardReviewDetail;
 exports.CardReviewPassenger = CardReviewPassenger;
 exports.CardServiceMenu = CardServiceMenu;
 exports.CardStatusOrder = CardStatusOrder;