@asdp/ferryui 0.1.22-dev.10171 → 0.1.22-dev.10189

package/dist/index.mjs

@@ -7922,7 +7922,9 @@ var DEFAULT_LABELS14 = {
     loading: "Memuat...",
     saveButton: "Simpan",
     closeAriaLabel: "Tutup",
-    emptyContent: "Kelas Penumpang"
+    emptyContent: "Kelas Penumpang",
+    childCompanionWarning: "Anak harus didampingi minimal 1 dewasa atau lansia.",
+    infantCompanionWarning: "Bayi harus didampingi minimal 1 dewasa atau lansia."
   },
   en: {
     title: "Select Total Passengers",
@@ -7930,7 +7932,9 @@ var DEFAULT_LABELS14 = {
     loading: "Loading...",
     saveButton: "Save",
     closeAriaLabel: "Close",
-    emptyContent: "Passengers Class"
+    emptyContent: "Passengers Class",
+    childCompanionWarning: "Children must be accompanied by at least 1 adult or elderly.",
+    infantCompanionWarning: "Infants must be accompanied by at least 1 adult or elderly."
   }
 };
 var useStyles15 = makeStyles({
@@ -8003,6 +8007,14 @@ var useStyles15 = makeStyles({
   },
   accordionPanel: {
     margin: 0
+  },
+  warningText: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    marginBottom: "1rem",
+    fontSize: tokens.fontSizeBase300,
+    color: "#E87511"
   }
 });
 var TotalPassengersListSkeleton = ({
@@ -8081,6 +8093,9 @@ var ModalTotalPassengers = ({
   const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
   const [passengers, setPassengers] = useState([]);
   const [openItems, setOpenItems] = useState([]);
+  const [companionWarnings, setCompanionWarnings] = useState(
+    /* @__PURE__ */ new Set()
+  );
   const defaultInfoMessage = mergedLabels.infoMessage.replace(
     "{maxPassengers}",
     String(maxPassengers)
@@ -8138,13 +8153,6 @@ var ModalTotalPassengers = ({
     const cls = passenger.classes.find((c) => c.classCode === classCode);
     return cls?.count ?? 0;
   };
-  const getTotalCountForType = (passengerAgeCode) => {
-    const passenger = passengers.find(
-      (p) => p.passengerAgeCode === passengerAgeCode
-    );
-    if (!passenger) return 0;
-    return passenger.classes.reduce((sum, cls) => sum + (cls.count ?? 0), 0);
-  };
   const getTotalForType = (passengerAgeCode) => {
     const passenger = passengers.find(
       (p) => p.passengerAgeCode === passengerAgeCode
@@ -8163,6 +8171,20 @@ var ModalTotalPassengers = ({
     (total, passenger) => total + passenger.classes.reduce((sum, cls) => sum + (cls.count ?? 0), 0),
     0
   );
+  useEffect(() => {
+    const warnings = /* @__PURE__ */ new Set();
+    const hasAdultOrElderly = passengers.some(
+      (p) => (p.passengerAgeCode === "ADULT" || p.passengerAgeCode === "ELDERLY") && p.classes.some((cls) => (cls.count ?? 0) > 0)
+    );
+    if (!hasAdultOrElderly) {
+      passengers.forEach((p) => {
+        if ((p.passengerAgeCode === "CHILD" || p.passengerAgeCode === "INFANT") && p.classes.some((cls) => (cls.count ?? 0) > 0)) {
+          warnings.add(p.passengerAgeCode);
+        }
+      });
+    }
+    setCompanionWarnings(warnings);
+  }, [passengers]);
   const handleIncrement = (passengerAgeCode, classCode) => {
     setPassengers(
       (prev) => prev.map((passenger) => {
@@ -8257,80 +8279,96 @@ var ModalTotalPassengers = ({
           className: styles.passengerSection,
           children: passengerTypes.map((passengerType) => {
             const classes = passengerType.classes || [];
-            return /* @__PURE__ */ jsxs(
-              AccordionItem,
-              {
-                value: String(passengerType.id),
-                className: styles.accordionItem,
-                children: [
-                  /* @__PURE__ */ jsxs(
-                    AccordionHeader,
-                    {
-                      className: styles.accordionHeader,
-                      expandIconPosition: "end",
-                      children: [
-                        passengerType.passengerAgeName,
-                        " (",
-                        getTotalForType(passengerType.passengerAgeCode),
-                        ")"
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(AccordionPanel, { className: styles.accordionPanel, children: /* @__PURE__ */ jsx("div", { className: styles.nestedSection, children: classes.map((cls) => /* @__PURE__ */ jsxs("div", { className: styles.nestedRow, children: [
-                    /* @__PURE__ */ jsx(Body1, { children: (cls?.className || "")?.toUpperCase() }),
-                    /* @__PURE__ */ jsxs("div", { className: styles.passengerCount, children: [
-                      /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          appearance: "outline",
-                          className: styles.counterButton,
-                          size: "small",
-                          icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:subtract-12-regular" }),
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            handleDecrement(
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                AccordionItem,
+                {
+                  value: String(passengerType.id),
+                  className: styles.accordionItem,
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      AccordionHeader,
+                      {
+                        className: styles.accordionHeader,
+                        expandIconPosition: "end",
+                        children: [
+                          passengerType.passengerAgeName,
+                          " (",
+                          getTotalForType(passengerType.passengerAgeCode),
+                          ")"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(AccordionPanel, { className: styles.accordionPanel, children: /* @__PURE__ */ jsx("div", { className: styles.nestedSection, children: classes.map((cls) => /* @__PURE__ */ jsxs("div", { className: styles.nestedRow, children: [
+                      /* @__PURE__ */ jsx(Body1, { children: (cls?.className || "")?.toUpperCase() }),
+                      /* @__PURE__ */ jsxs("div", { className: styles.passengerCount, children: [
+                        /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            appearance: "outline",
+                            className: styles.counterButton,
+                            size: "small",
+                            icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:subtract-12-regular" }),
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleDecrement(
+                                passengerType.passengerAgeCode,
+                                cls.classCode
+                              );
+                            },
+                            disabled: getServiceCount(
                               passengerType.passengerAgeCode,
                               cls.classCode
-                            );
-                          },
-                          disabled: getServiceCount(
-                            passengerType.passengerAgeCode,
-                            cls.classCode
-                          ) === 0 || getTotalCountForType(
-                            passengerType.passengerAgeCode
-                          ) <= passengerType.minCapacity
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(Body1, { className: styles.countText, children: getServiceCount(
-                        passengerType.passengerAgeCode,
-                        cls.classCode
-                      ) }),
-                      /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          appearance: "outline",
-                          className: styles.counterButton,
-                          size: "small",
-                          icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:add-12-regular" }),
-                          disabled: getServiceCount(
-                            passengerType.passengerAgeCode,
-                            cls.classCode
-                          ) >= cls.maxCapacity || totalPassengerCount >= maxPassengers,
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            handleIncrement(
+                            ) === 0
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Body1, { className: styles.countText, children: getServiceCount(
+                          passengerType.passengerAgeCode,
+                          cls.classCode
+                        ) }),
+                        /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            appearance: "outline",
+                            className: styles.counterButton,
+                            size: "small",
+                            icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:add-12-regular" }),
+                            disabled: getServiceCount(
                               passengerType.passengerAgeCode,
                               cls.classCode
-                            );
+                            ) >= cls.maxCapacity || totalPassengerCount >= maxPassengers,
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleIncrement(
+                                passengerType.passengerAgeCode,
+                                cls.classCode
+                              );
+                            }
                           }
-                        }
-                      )
-                    ] })
-                  ] }, cls.id)) }) })
-                ]
-              },
-              passengerType.id
-            );
+                        )
+                      ] })
+                    ] }, cls.id)) }) })
+                  ]
+                },
+                passengerType.id
+              ),
+              companionWarnings.has(
+                passengerType.passengerAgeCode
+              ) && /* @__PURE__ */ jsxs("div", { className: styles.warningText, children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    icon: "fluent:warning-12-filled",
+                    style: {
+                      fontSize: "16px",
+                      color: "#E87511",
+                      flexShrink: 0
+                    }
+                  }
+                ),
+                passengerType.passengerAgeCode === "CHILD" ? mergedLabels.childCompanionWarning : mergedLabels.infantCompanionWarning
+              ] })
+            ] });
           })
         }
       ),
@@ -8341,6 +8379,7 @@ var ModalTotalPassengers = ({
           size: "medium",
           className: styles.submitButton,
           onClick: handleSave,
+          disabled: totalPassengerCount === 0,
           children: mergedLabels.saveButton
         }
       )
@@ -13596,7 +13635,7 @@ var CardVehicleOwnerForm = ({
 // src/components/CardBookingTicket/CardBookingTicket.constants.ts
 var DEFAULT_LABELS27 = {
   id: {
-    bookingDetails: "Booking Details",
+    bookingDetails: "Ringkasan Pemesanan",
     routeTitle: "Rute Perjalanan",
     estimationPrefix: "Estimasi",
     totalPriceLabel: "Total Harga",
@@ -14014,8 +14053,250 @@ var CardBookingTicket = ({
   ] }) });
 };
 
-// src/components/CardFAQ/CardFAQ.constants.ts
+// src/components/CardBookingAddOn/CardBookingAddOn.constants.ts
 var DEFAULT_LABELS28 = {
+  id: {
+    bookingDetails: "Ringkasan",
+    totalPriceLabel: "Total Add On",
+    currencySymbol: "IDR",
+    notIncludedLabel: "Belum termasuk tiket",
+    backToReviewButton: "Kembali Ke Review Pemesanan",
+    changeAddOnButton: "Ubah Layanan Tambahan",
+    loungeLabel: "Akses Lounge",
+    assuranceLabel: "Asuransi Perjalanan",
+    mealLabel: "Makanan",
+    addOnPrice: "IDR. 125,000"
+  },
+  en: {
+    bookingDetails: "Summary",
+    totalPriceLabel: "Total Add On",
+    currencySymbol: "IDR",
+    notIncludedLabel: "Not including ticket fare",
+    backToReviewButton: "Back To Booking Review",
+    changeAddOnButton: "Change Additional Services",
+    loungeLabel: "Lounge Access",
+    assuranceLabel: "Travel Insurance",
+    mealLabel: "Meal",
+    addOnPrice: "IDR. 125,000"
+  }
+};
+var useStyles29 = makeStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2rem"
+  },
+  bookingDetail: {
+    overflow: "visible",
+    borderRadius: tokens.borderRadiusXLarge,
+    boxShadow: tokens.shadow4
+  },
+  bookingDetailTop: {
+    padding: "2rem",
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    boxShadow: "none",
+    borderTopLeftRadius: tokens.borderRadiusXLarge,
+    borderTopRightRadius: tokens.borderRadiusXLarge,
+    borderBottom: "0.7em dashed " + tokens.colorNeutralBackground1Hover,
+    overflow: "visible",
+    paddingBottom: "4rem",
+    position: "relative"
+  },
+  bookingDetailBottom: {
+    padding: "2rem",
+    paddingTop: "4rem",
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    boxShadow: "none",
+    borderBottomLeftRadius: tokens.borderRadiusXLarge,
+    borderBottomRightRadius: tokens.borderRadiusXLarge,
+    overflow: "visible",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "1.5rem"
+  },
+  circularLeft: {
+    position: "absolute",
+    width: "75px",
+    height: "75px",
+    borderRadius: "50%",
+    backgroundColor: tokens.colorNeutralBackground1Hover,
+    left: "-37px",
+    bottom: "-42px",
+    zIndex: 2,
+    boxShadow: "inset -3px 0px 1px rgba(0, 0, 0, 0.1)"
+  },
+  circularRight: {
+    position: "absolute",
+    width: "75px",
+    height: "75px",
+    borderRadius: "50%",
+    backgroundColor: tokens.colorNeutralBackground1Hover,
+    right: "-37px",
+    bottom: "-42px",
+    zIndex: 2,
+    boxShadow: "inset 3px 0px 1px rgba(0, 0, 0, 0.1)"
+  },
+  headerBookingDetail: {
+    rowGap: tokens.spacingHorizontalXXL
+  },
+  shipInfo: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "1rem"
+  },
+  ticketInfo: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: "0.5em"
+  },
+  ticketTime: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "start",
+    gap: "0.5em"
+  },
+  ticketDuration: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "0.5rem"
+  },
+  totalPrice: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "1rem",
+    width: "100%"
+  },
+  gapButton: {
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingHorizontalM
+  },
+  priceText: {
+    color: tokens.colorPaletteRedForeground1
+  },
+  notIncluded: {
+    textAlign: "right",
+    width: "100%"
+  },
+  secondaryButton: {
+    border: "1px solid " + tokens.colorBrandStroke1,
+    color: tokens.colorBrandBackground,
+    width: "100%"
+  }
+});
+var CardBookingAddOn = ({
+  language = "id",
+  labels,
+  addOnData,
+  totalPrice,
+  onPriceDetailClick,
+  onBackToReviewClick,
+  onChangeAddOnClick,
+  className
+}) => {
+  const styles = useStyles29();
+  const mergedLabels = { ...DEFAULT_LABELS28[language], ...labels };
+  const addOnRows = [
+    {
+      key: "lounge",
+      label: addOnData?.lounge?.label || mergedLabels.loungeLabel,
+      price: addOnData?.lounge?.price || mergedLabels.addOnPrice
+    },
+    {
+      key: "assurance",
+      label: addOnData?.assurance?.label || mergedLabels.assuranceLabel,
+      price: addOnData?.assurance?.price || mergedLabels.addOnPrice
+    },
+    {
+      key: "meal",
+      label: addOnData?.meal?.label || mergedLabels.mealLabel,
+      price: addOnData?.meal?.price || mergedLabels.addOnPrice
+    }
+  ];
+  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 }),
+      /* @__PURE__ */ jsx(
+        Row,
+        {
+          direction: "column",
+          nogutter: true,
+          className: styles.headerBookingDetail,
+          children: addOnRows.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, align: "center", justify: "between", children: [
+            /* @__PURE__ */ jsx(Body1, { children: item.label }),
+            /* @__PURE__ */ jsx(Body1, { children: item.price })
+          ] }) }, item.key))
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles.circularLeft }),
+      /* @__PURE__ */ jsx("div", { className: styles.circularRight })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { className: styles.bookingDetailBottom, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.totalPrice, children: [
+        /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.totalPriceLabel }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: tokens.spacingHorizontalL,
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Title3, { className: styles.priceText, children: [
+                mergedLabels.currencySymbol,
+                " ",
+                totalPrice
+              ] }),
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: "fluent:chevron-down-24-filled",
+                  onClick: onPriceDetailClick,
+                  style: { cursor: "pointer" }
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Body1, { className: styles.notIncluded, children: mergedLabels.notIncludedLabel }),
+      /* @__PURE__ */ jsxs("div", { className: styles.gapButton, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            shape: "circular",
+            appearance: "primary",
+            onClick: onBackToReviewClick,
+            children: mergedLabels.backToReviewButton
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            shape: "circular",
+            appearance: "outline",
+            className: styles.secondaryButton,
+            onClick: onChangeAddOnClick,
+            children: mergedLabels.changeAddOnButton
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+};
+
+// src/components/CardFAQ/CardFAQ.constants.ts
+var DEFAULT_LABELS29 = {
   id: {
     title: "Pertanyaan yang sering diajukan"
   },
@@ -14069,7 +14350,7 @@ var DEFAULT_FAQ_ITEMS = {
     }
   ]
 };
-var useStyles29 = makeStyles({
+var useStyles30 = makeStyles({
   faqSection: {
     // marginTop: '2rem', // Let parent control spacing if needed, or keep consistent
   },
@@ -14093,8 +14374,8 @@ var CardFAQ = ({
   items,
   className
 }) => {
-  const styles = useStyles29();
-  const mergedLabels = { ...DEFAULT_LABELS28[language], ...labels };
+  const styles = useStyles30();
+  const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
   const faqItems = items || DEFAULT_FAQ_ITEMS[language];
   return /* @__PURE__ */ jsxs(Card, { className: styles.faqCard, children: [
     /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.title }),
@@ -14131,7 +14412,7 @@ var CardFAQ = ({
 };
 
 // src/components/CardAddon/CardAddon.constants.ts
-var DEFAULT_LABELS29 = {
+var DEFAULT_LABELS30 = {
   id: {
     viewDetail: "Lihat detail",
     totalPrice: "Total Harga",
@@ -14147,7 +14428,7 @@ var DEFAULT_LABELS29 = {
     currencySymbol: "Rp"
   }
 };
-var useStyles30 = makeStyles({
+var useStyles31 = makeStyles({
   card: {
     backgroundColor: tokens.colorNeutralBackground1,
     boxShadow: tokens.shadow4,
@@ -14320,8 +14601,8 @@ var CardAddon = ({
   children,
   className
 }) => {
-  const styles = useStyles30();
-  const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
+  const styles = useStyles31();
+  const mergedLabels = { ...DEFAULT_LABELS30[language], ...labels };
   return /* @__PURE__ */ jsx(Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: styles.gapRow, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.titleDivider, children: [
       /* @__PURE__ */ jsx(Title3, { className: styles.textTitle, children: title }),
@@ -14532,7 +14813,7 @@ var CardAddon = ({
 };
 
 // src/components/CardMealCatalog/CardMealCatalog.constants.ts
-var DEFAULT_LABELS30 = {
+var DEFAULT_LABELS31 = {
   id: {
     addButton: "Tambah",
     currencySymbol: "Rp",
@@ -14548,7 +14829,7 @@ var DEFAULT_LABELS30 = {
     searchPlaceholder: "Search for food or drinks you want"
   }
 };
-var useStyles31 = makeStyles({
+var useStyles32 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -14692,8 +14973,8 @@ var CardMealCatalog = ({
   searchValue,
   onSearchChange
 }) => {
-  const styles = useStyles31();
-  const mergedLabels = { ...DEFAULT_LABELS30[language], ...labels };
+  const styles = useStyles32();
+  const mergedLabels = { ...DEFAULT_LABELS31[language], ...labels };
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.banner, children: [
       /* @__PURE__ */ jsx("div", { className: styles.bannerOverlay }),
@@ -14798,7 +15079,7 @@ var CardMealCatalog = ({
 };
 
 // src/components/CardReview/CardReview.constants.ts
-var DEFAULT_LABELS31 = {
+var DEFAULT_LABELS32 = {
   id: {
     defaultTitle: "Tinjauan"
   },
@@ -14806,7 +15087,7 @@ var DEFAULT_LABELS31 = {
     defaultTitle: "Review"
   }
 };
-var useStyles32 = makeStyles({
+var useStyles33 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -14858,8 +15139,8 @@ var CardReview = ({
   className,
   headerAction
 }) => {
-  const styles = useStyles32();
-  const mergedLabels = { ...DEFAULT_LABELS31[language], ...labels };
+  const styles = useStyles33();
+  const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
   return /* @__PURE__ */ jsxs(Card, { className: `${styles.card} ${className || ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
       /* @__PURE__ */ jsx(Subtitle1, { className: styles.headerTitle, children: title || mergedLabels.defaultTitle }),
@@ -14906,17 +15187,17 @@ var CardReview = ({
 };
 
 // src/components/CardReviewPassenger/CardReviewPassenger.constants.ts
-var DEFAULT_LABELS32 = {
+var DEFAULT_LABELS33 = {
   id: {
     title: "Penumpang",
-    idNumber: "Nomor ID"
+    idNumber: "ID"
   },
   en: {
     title: "Passenger",
-    idNumber: "ID Number"
+    idNumber: "ID"
   }
 };
-var useStyles33 = makeStyles({
+var useStyles34 = makeStyles({
   card: {
     boxShadow: "none",
     border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
@@ -14990,8 +15271,8 @@ var CardReviewPassenger = ({
   passengers,
   className
 }) => {
-  const styles = useStyles33();
-  const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
+  const styles = useStyles34();
+  const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   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: [
@@ -15030,7 +15311,7 @@ var CardReviewPassenger = ({
 };
 
 // src/components/CardReviewDetail/CardReviewDetail.constants.ts
-var DEFAULT_LABELS33 = {
+var DEFAULT_LABELS34 = {
   id: {
     title: "Detail Pemesanan",
     fromLabel: "Dari",
@@ -15039,7 +15320,9 @@ var DEFAULT_LABELS33 = {
     bookingNameLabel: "Nama Pemesanan",
     passengerTypeLabel: "Jenis Penumpang",
     addOnLabel: "Add On",
-    viewDetail: "Lihat Detail"
+    viewDetail: "Lihat Detail",
+    noAddOnsLabel: "Tidak ada layanan",
+    serviceLabel: "Layanan"
   },
   en: {
     title: "Booking Details",
@@ -15049,10 +15332,12 @@ var DEFAULT_LABELS33 = {
     bookingNameLabel: "Booking Name",
     passengerTypeLabel: "Passenger Type",
     addOnLabel: "Add On",
-    viewDetail: "View Details"
+    viewDetail: "View Details",
+    noAddOnsLabel: "No services",
+    serviceLabel: "Service"
   }
 };
-var useStyles34 = makeStyles({
+var useStyles35 = makeStyles({
   card: {
     boxShadow: "none",
     border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
@@ -15065,9 +15350,7 @@ var useStyles34 = makeStyles({
     gap: tokens.spacingHorizontalS
   },
   fieldRow: {
-    display: "flex",
-    alignItems: "flex-start",
-    gap: tokens.spacingHorizontalL
+    rowGap: tokens.spacingHorizontalL
   },
   addOnRow: {
     display: "flex",
@@ -15088,45 +15371,49 @@ var CardReviewDetail = ({
   onViewAddOns,
   className
 }) => {
-  const styles = useStyles34();
-  const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
-  return /* @__PURE__ */ jsx(Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, direction: "column", style: { gap: tokens.spacingHorizontalL }, children: [
-    /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.titleRow, children: [
-      /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.title }),
-      /* @__PURE__ */ jsx(Divider, { style: { width: 0 } })
-    ] }) }),
-    /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.fieldRow, children: [
-      /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(Field, { label: mergedLabels.fromLabel, children: /* @__PURE__ */ jsx(Body1Strong, { children: from }) }) }),
-      /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(Field, { label: mergedLabels.toLabel, children: /* @__PURE__ */ jsx(Body1Strong, { children: to }) }) })
-    ] }) }),
-    /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.fieldRow, children: [
-      /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(Field, { label: mergedLabels.scheduleLabel, children: /* @__PURE__ */ jsx(Body1Strong, { children: scheduleTime }) }) }),
-      /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(Field, { label: mergedLabels.bookingNameLabel, children: /* @__PURE__ */ jsx(Body1Strong, { children: bookingName }) }) })
-    ] }) }),
-    /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.fieldRow, children: [
-      /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(Field, { label: mergedLabels.passengerTypeLabel, children: /* @__PURE__ */ jsx(Body1Strong, { children: passengerType }) }) }),
-      /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(Field, { label: mergedLabels.addOnLabel, children: /* @__PURE__ */ jsxs("div", { className: styles.addOnRow, children: [
-        /* @__PURE__ */ jsxs(Body1Strong, { children: [
-          addOnsCount,
-          " ",
-          addOnsCount === 1 ? "Layanan" : "Layanan"
-        ] }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            appearance: "transparent",
-            onClick: onViewAddOns,
-            style: { color: brandColors[80] },
-            children: mergedLabels.viewDetail
-          }
-        )
-      ] }) }) })
-    ] }) })
-  ] }) });
+  const styles = useStyles35();
+  const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
+  return /* @__PURE__ */ jsx(Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxs(
+    Row,
+    {
+      nogutter: true,
+      direction: "column",
+      style: { gap: tokens.spacingHorizontalL },
+      children: [
+        /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.titleRow, children: [
+          /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.title }),
+          /* @__PURE__ */ jsx(Divider, { style: { width: 0 } })
+        ] }) }),
+        /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { className: styles.fieldRow, children: [
+          /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsx(Field, { label: mergedLabels.fromLabel, children: /* @__PURE__ */ jsx(Body1Strong, { children: from }) }) }),
+          /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsx(Field, { label: mergedLabels.toLabel, children: /* @__PURE__ */ jsx(Body1Strong, { children: to }) }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { className: styles.fieldRow, children: [
+          /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsx(Field, { label: mergedLabels.scheduleLabel, children: /* @__PURE__ */ jsx(Body1Strong, { children: scheduleTime }) }) }),
+          /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsx(Field, { label: mergedLabels.bookingNameLabel, children: /* @__PURE__ */ jsx(Body1Strong, { children: bookingName }) }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { className: styles.fieldRow, children: [
+          /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsx(Field, { label: mergedLabels.passengerTypeLabel, children: /* @__PURE__ */ jsx(Body1Strong, { children: passengerType }) }) }),
+          /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsx(Field, { label: mergedLabels.addOnLabel, children: /* @__PURE__ */ jsxs("div", { className: styles.addOnRow, children: [
+            /* @__PURE__ */ jsx(Body1Strong, { children: addOnsCount === 0 ? mergedLabels.noAddOnsLabel : `${addOnsCount} ${addOnsCount === 1 ? mergedLabels.serviceLabel : mergedLabels.serviceLabel}` }),
+            addOnsCount > 0 && /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "transparent",
+                onClick: onViewAddOns,
+                style: { color: brandColors[80] },
+                children: mergedLabels.viewDetail
+              }
+            )
+          ] }) }) })
+        ] }) })
+      ]
+    }
+  ) });
 };
 
 // src/components/CardPriceDetails/CardPriceDetails.constants.ts
-var DEFAULT_LABELS34 = {
+var DEFAULT_LABELS35 = {
   id: {
     defaultTitle: "Rincian Harga",
     totalPayment: "Total Pembayaran",
@@ -15162,7 +15449,7 @@ var DEFAULT_LABELS34 = {
     currencyPrefix: "Rp. "
   }
 };
-var useStyles35 = makeStyles({
+var useStyles36 = makeStyles({
   list: {
     margin: 0,
     padding: 0,
@@ -15184,7 +15471,7 @@ var PriceDetailsTerms = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles35();
+  const styles = useStyles36();
   const linkColor = tokens.colorBrandBackground;
   const bookingTerms = labels.bookingTerms;
   const agreementTerms = [
@@ -15204,7 +15491,7 @@ var PriceDetailsTerms = ({
     ] })
   ] });
 };
-var useStyles36 = makeStyles({
+var useStyles37 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -15281,8 +15568,8 @@ var CardPriceDetails = ({
   total,
   labels
 }) => {
-  const styles = useStyles36();
-  const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
+  const styles = useStyles37();
+  const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
   const displayTitle = title || mergedLabels.defaultTitle;
   const getVariantClass = (variant) => {
     switch (variant) {
@@ -15341,7 +15628,7 @@ var CardPriceDetails = ({
 };
 
 // src/components/CardPaymentMethodList/CardPaymentMethodList.constants.ts
-var DEFAULT_LABELS35 = {
+var DEFAULT_LABELS36 = {
   id: {
     selectAriaLabel: "Pilih metode pembayaran"
   },
@@ -15349,7 +15636,7 @@ var DEFAULT_LABELS35 = {
     selectAriaLabel: "Select payment method"
   }
 };
-var useStyles37 = makeStyles({
+var useStyles38 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -15409,8 +15696,8 @@ var CardPaymentMethodList = ({
   selectedValue,
   onSelect
 }) => {
-  const styles = useStyles37();
-  const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
+  const styles = useStyles38();
+  const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
   return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsx("div", { className: `${styles.container}`, children: methods.map((category, index) => /* @__PURE__ */ jsxs("div", { children: [
     index > 0 && /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, {}) }),
     /* @__PURE__ */ jsx(Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxs(AccordionItem, { value: category.value, children: [
@@ -15459,7 +15746,7 @@ var CardPaymentMethodList = ({
 };
 
 // src/components/CardPaymentGuide/CardPaymentGuide.constants.ts
-var DEFAULT_LABELS36 = {
+var DEFAULT_LABELS37 = {
   id: {
     title: "Cara Pembayaran"
   },
@@ -15467,7 +15754,7 @@ var DEFAULT_LABELS36 = {
     title: "Payment Method"
   }
 };
-var useStyles38 = makeStyles({
+var useStyles39 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -15503,8 +15790,8 @@ var CardPaymentGuide = ({
   guides,
   className
 }) => {
-  const styles = useStyles38();
-  const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
+  const styles = useStyles39();
+  const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     displayTitle && /* @__PURE__ */ jsx("div", { className: styles.titleContainer, children: /* @__PURE__ */ jsx(Subtitle1, { className: styles.title, children: displayTitle }) }),
@@ -15523,7 +15810,7 @@ var CardPaymentGuide = ({
 };
 
 // src/components/CardPaymentInfo/CardPaymentInfo.constants.ts
-var DEFAULT_LABELS37 = {
+var DEFAULT_LABELS38 = {
   id: {
     expiryPrefix: "Kode virtual akun berlaku sampai",
     copyCodeButton: "Salin Kode",
@@ -15543,7 +15830,7 @@ var DEFAULT_LABELS37 = {
     changePayment: "Change Payment Method"
   }
 };
-var useStyles39 = makeStyles({
+var useStyles40 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -15635,8 +15922,8 @@ var CardPaymentInfo = ({
   onCheckStatus,
   onChangePayment
 }) => {
-  const styles = useStyles39();
-  const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
+  const styles = useStyles40();
+  const mergedLabels = { ...DEFAULT_LABELS38[language], ...labels };
   return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
       /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.expiryPrefix }),
@@ -15708,7 +15995,7 @@ var CardPaymentInfo = ({
 };
 
 // src/components/CardStatusOrder/CardStatusOrder.constants.ts
-var DEFAULT_LABELS38 = {
+var DEFAULT_LABELS39 = {
   id: {
     detailTitle: "Detail Pemesanan",
     statusLabel: "Status",
@@ -15738,7 +16025,7 @@ var DEFAULT_LABELS38 = {
     illustrationAlt: "E-Ticket Illustration"
   }
 };
-var useStyles40 = makeStyles({
+var useStyles41 = makeStyles({
   activeCard: {
     width: "100%",
     // padding: tokens.spacingHorizontalNone, // default
@@ -15808,8 +16095,8 @@ var CardStatusOrder = ({
   onClickViewTicket,
   className
 }) => {
-  const styles = useStyles40();
-  const mergedLabels = { ...DEFAULT_LABELS38[language], ...labels };
+  const styles = useStyles41();
+  const mergedLabels = { ...DEFAULT_LABELS39[language], ...labels };
   const displayStatus = statusLabel || mergedLabels.defaultStatus;
   const displayTitle = title || mergedLabels.defaultTitle;
   const displayDescription = description || mergedLabels.defaultDescription;
@@ -15906,7 +16193,7 @@ var CardStatusOrder = ({
 };
 
 // src/components/ModalPriceDetail/ModalPriceDetail.constants.ts
-var DEFAULT_LABELS39 = {
+var DEFAULT_LABELS40 = {
   id: {
     title: "Rincian Harga",
     addonHeader: "Add On",
@@ -15932,7 +16219,7 @@ var DEFAULT_LABELS39 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles41 = makeStyles({
+var useStyles42 = makeStyles({
   surface: {
     width: "680px",
     maxWidth: "90vw",
@@ -16059,8 +16346,8 @@ var ModalPriceDetail = ({
   grandTotal,
   ...props
 }) => {
-  const styles = useStyles41();
-  const mergedLabels = { ...DEFAULT_LABELS39[language], ...labels };
+  const styles = useStyles42();
+  const mergedLabels = { ...DEFAULT_LABELS40[language], ...labels };
   return /* @__PURE__ */ jsx(
     Dialog,
     {
@@ -16202,7 +16489,7 @@ var ModalPriceDetail = ({
 // src/components/FileUpload/FileUpload.constants.ts
 var ACCEPTED_FILES = ".pdf,.jpg,.jpeg,.png";
 var MAX_FILE_SIZE_MB = 10;
-var DEFAULT_LABELS40 = {
+var DEFAULT_LABELS41 = {
   id: {
     placeholder: "Ketuk untuk pilih file",
     maxSizeWarning: "Maksimal {maxSize}MB per file dalam format PDF, JPG, JPEG, PNG.",
@@ -16220,7 +16507,7 @@ var DEFAULT_LABELS40 = {
     downloadTemplateDocument: "Download Template Document"
   }
 };
-var useStyles42 = makeStyles({
+var useStyles43 = makeStyles({
   surface: {
     maxWidth: "90vw",
     maxHeight: "90vh",
@@ -16247,7 +16534,7 @@ var ModalPreviewImage = ({
   imageUrl,
   alt = "Preview"
 }) => {
-  const styles = useStyles42();
+  const styles = useStyles43();
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (_, data) => onOpenChange(data.open), children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.surface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
     /* @__PURE__ */ jsx(
       DialogTitle,
@@ -16373,7 +16660,7 @@ var FileUpload = React.forwardRef(
     downloadTemplateDocument = false,
     infoLabel
   }, ref) => {
-    const mergedLabels = { ...DEFAULT_LABELS40[language], ...customLabels };
+    const mergedLabels = { ...DEFAULT_LABELS41[language], ...customLabels };
     const styles = uploadStyles();
     const fileInputRef = useRef(null);
     const [, setIsDragOver] = useState(false);
@@ -16810,11 +17097,11 @@ function hexToRgba(hex, alpha = 1) {
 }
 
 // src/components/CardProfileMenu/CardProfileMenu.constants.ts
-var DEFAULT_LABELS41 = {
+var DEFAULT_LABELS42 = {
   id: {},
   en: {}
 };
-var useStyles43 = makeStyles({
+var useStyles44 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -16874,8 +17161,8 @@ var CardProfileMenu = ({
   selectedValue,
   onTabSelect
 }) => {
-  const styles = useStyles43();
-  ({ ...DEFAULT_LABELS41[language], ...labels });
+  const styles = useStyles44();
+  ({ ...DEFAULT_LABELS42[language], ...labels });
   const handleTabSelect = (_, data) => {
     onTabSelect(data.value);
   };
@@ -16904,6 +17191,6 @@ var CardProfileMenu = ({
   ) });
 };
 
-export { API_CONFIG, API_ENDPOINTS, API_ERROR_MESSAGES, BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, COUNTRIES, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewDetail, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS8 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS9 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS18 as DateFilterDefaultLabels, EmptyContent, DEFAULT_LABELS11 as EmptyContentDefaultLabels, FileUpload_default as FileUpload, GENDER, HARDCODED_ID, HTTP_STATUS, IDENTITY_TYPE, InputDynamic_default as InputDynamic, LOAD_TYPE, MANIFEST_ENTITY, MODAL_PRESETS, MY_TICKET_STATUS, MY_TICKET_TAB, ModalFilterTicket, DEFAULT_LABELS17 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListMenuService, ModalListPassenger, ModalPassengerForm, ModalPreviewImage, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, PASSENGER_TYPE, SortMenu, Stepper, calculateAge, getBadgeConfig, getModalPreset, getSortLabel, hexToRgba };
+export { API_CONFIG, API_ENDPOINTS, API_ERROR_MESSAGES, BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, COUNTRIES, CardAddon, CardBanner, CardBookingAddOn, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewDetail, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS8 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS9 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS18 as DateFilterDefaultLabels, EmptyContent, DEFAULT_LABELS11 as EmptyContentDefaultLabels, FileUpload_default as FileUpload, GENDER, HARDCODED_ID, HTTP_STATUS, IDENTITY_TYPE, InputDynamic_default as InputDynamic, LOAD_TYPE, MANIFEST_ENTITY, MODAL_PRESETS, MY_TICKET_STATUS, MY_TICKET_TAB, ModalFilterTicket, DEFAULT_LABELS17 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListMenuService, ModalListPassenger, ModalPassengerForm, ModalPreviewImage, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, PASSENGER_TYPE, SortMenu, Stepper, calculateAge, getBadgeConfig, getModalPreset, getSortLabel, hexToRgba };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map