@asdp/ferryui 0.1.22-dev.10177 → 0.1.22-dev.10194

package/dist/index.js

@@ -8388,7 +8388,7 @@ var ModalTotalPassengers = ({
           size: "medium",
           className: styles.submitButton,
           onClick: handleSave,
-          disabled: totalPassengerCount === 0,
+          disabled: totalPassengerCount === 0 || companionWarnings.size > 0,
           children: mergedLabels.saveButton
         }
       )
@@ -13644,7 +13644,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",
@@ -14062,8 +14062,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 = reactComponents.makeStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2rem"
+  },
+  bookingDetail: {
+    overflow: "visible",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    boxShadow: reactComponents.tokens.shadow4
+  },
+  bookingDetailTop: {
+    padding: "2rem",
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    boxShadow: "none",
+    borderTopLeftRadius: reactComponents.tokens.borderRadiusXLarge,
+    borderTopRightRadius: reactComponents.tokens.borderRadiusXLarge,
+    borderBottom: "0.7em dashed " + reactComponents.tokens.colorNeutralBackground1Hover,
+    overflow: "visible",
+    paddingBottom: "4rem",
+    position: "relative"
+  },
+  bookingDetailBottom: {
+    padding: "2rem",
+    paddingTop: "4rem",
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    boxShadow: "none",
+    borderBottomLeftRadius: reactComponents.tokens.borderRadiusXLarge,
+    borderBottomRightRadius: reactComponents.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: reactComponents.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: reactComponents.tokens.colorNeutralBackground1Hover,
+    right: "-37px",
+    bottom: "-42px",
+    zIndex: 2,
+    boxShadow: "inset 3px 0px 1px rgba(0, 0, 0, 0.1)"
+  },
+  headerBookingDetail: {
+    rowGap: reactComponents.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: reactComponents.tokens.spacingHorizontalM
+  },
+  priceText: {
+    color: reactComponents.tokens.colorPaletteRedForeground1
+  },
+  notIncluded: {
+    textAlign: "right",
+    width: "100%"
+  },
+  secondaryButton: {
+    border: "1px solid " + reactComponents.tokens.colorBrandStroke1,
+    color: reactComponents.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__ */ jsxRuntime.jsx("div", { className: `${styles.container} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.bookingDetail, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.bookingDetailTop, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.bookingDetails }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactGridSystem.Row,
+        {
+          direction: "column",
+          nogutter: true,
+          className: styles.headerBookingDetail,
+          children: addOnRows.map((item) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, align: "center", justify: "between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.price })
+          ] }) }, item.key))
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.circularLeft }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.circularRight })
+    ] }),
+    /* @__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(
+          "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.jsx(reactComponents.Body1, { className: styles.notIncluded, children: mergedLabels.notIncludedLabel }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.gapButton, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Button,
+          {
+            shape: "circular",
+            appearance: "primary",
+            onClick: onBackToReviewClick,
+            children: mergedLabels.backToReviewButton
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.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"
   },
@@ -14117,7 +14359,7 @@ var DEFAULT_FAQ_ITEMS = {
     }
   ]
 };
-var useStyles29 = reactComponents.makeStyles({
+var useStyles30 = reactComponents.makeStyles({
   faqSection: {
     // marginTop: '2rem', // Let parent control spacing if needed, or keep consistent
   },
@@ -14141,8 +14383,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__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.faqCard, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.title }),
@@ -14179,7 +14421,7 @@ var CardFAQ = ({
 };
 
 // src/components/CardAddon/CardAddon.constants.ts
-var DEFAULT_LABELS29 = {
+var DEFAULT_LABELS30 = {
   id: {
     viewDetail: "Lihat detail",
     totalPrice: "Total Harga",
@@ -14195,7 +14437,7 @@ var DEFAULT_LABELS29 = {
     currencySymbol: "Rp"
   }
 };
-var useStyles30 = reactComponents.makeStyles({
+var useStyles31 = reactComponents.makeStyles({
   card: {
     backgroundColor: reactComponents.tokens.colorNeutralBackground1,
     boxShadow: reactComponents.tokens.shadow4,
@@ -14368,8 +14610,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__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.gapRow, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.titleDivider, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { className: styles.textTitle, children: title }),
@@ -14580,7 +14822,7 @@ var CardAddon = ({
 };
 
 // src/components/CardMealCatalog/CardMealCatalog.constants.ts
-var DEFAULT_LABELS30 = {
+var DEFAULT_LABELS31 = {
   id: {
     addButton: "Tambah",
     currencySymbol: "Rp",
@@ -14596,7 +14838,7 @@ var DEFAULT_LABELS30 = {
     searchPlaceholder: "Search for food or drinks you want"
   }
 };
-var useStyles31 = reactComponents.makeStyles({
+var useStyles32 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -14740,8 +14982,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__ */ jsxRuntime.jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.banner, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.bannerOverlay }),
@@ -14846,7 +15088,7 @@ var CardMealCatalog = ({
 };
 
 // src/components/CardReview/CardReview.constants.ts
-var DEFAULT_LABELS31 = {
+var DEFAULT_LABELS32 = {
   id: {
     defaultTitle: "Tinjauan"
   },
@@ -14854,7 +15096,7 @@ var DEFAULT_LABELS31 = {
     defaultTitle: "Review"
   }
 };
-var useStyles32 = reactComponents.makeStyles({
+var useStyles33 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -14906,8 +15148,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__ */ 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: title || mergedLabels.defaultTitle }),
@@ -14954,17 +15196,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 = reactComponents.makeStyles({
+var useStyles34 = reactComponents.makeStyles({
   card: {
     boxShadow: "none",
     border: `${reactComponents.tokens.strokeWidthThin} solid ${reactComponents.tokens.colorNeutralStroke1}`,
@@ -15038,8 +15280,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__ */ 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: [
@@ -15078,7 +15320,7 @@ var CardReviewPassenger = ({
 };
 
 // src/components/CardReviewDetail/CardReviewDetail.constants.ts
-var DEFAULT_LABELS33 = {
+var DEFAULT_LABELS34 = {
   id: {
     title: "Detail Pemesanan",
     fromLabel: "Dari",
@@ -15087,7 +15329,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",
@@ -15097,10 +15341,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 = reactComponents.makeStyles({
+var useStyles35 = reactComponents.makeStyles({
   card: {
     boxShadow: "none",
     border: `${reactComponents.tokens.strokeWidthThin} solid ${reactComponents.tokens.colorNeutralStroke1}`,
@@ -15113,9 +15359,7 @@ var useStyles34 = reactComponents.makeStyles({
     gap: reactComponents.tokens.spacingHorizontalS
   },
   fieldRow: {
-    display: "flex",
-    alignItems: "flex-start",
-    gap: reactComponents.tokens.spacingHorizontalL
+    rowGap: reactComponents.tokens.spacingHorizontalL
   },
   addOnRow: {
     display: "flex",
@@ -15136,45 +15380,49 @@ var CardReviewDetail = ({
   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.jsx(
-          reactComponents.Button,
-          {
-            appearance: "transparent",
-            onClick: onViewAddOns,
-            style: { color: brandColors[80] },
-            children: mergedLabels.viewDetail
-          }
-        )
-      ] }) }) })
-    ] }) })
-  ] }) });
+  const styles = useStyles35();
+  const mergedLabels = { ...DEFAULT_LABELS34[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, { className: styles.fieldRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.fromLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: from }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, 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, { className: styles.fieldRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.scheduleLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: scheduleTime }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, 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, { className: styles.fieldRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.passengerTypeLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: passengerType }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.addOnLabel, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.addOnRow, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: addOnsCount === 0 ? mergedLabels.noAddOnsLabel : `${addOnsCount} ${addOnsCount === 1 ? mergedLabels.serviceLabel : mergedLabels.serviceLabel}` }),
+            addOnsCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.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",
@@ -15210,7 +15458,7 @@ var DEFAULT_LABELS34 = {
     currencyPrefix: "Rp. "
   }
 };
-var useStyles35 = reactComponents.makeStyles({
+var useStyles36 = reactComponents.makeStyles({
   list: {
     margin: 0,
     padding: 0,
@@ -15232,7 +15480,7 @@ var PriceDetailsTerms = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles35();
+  const styles = useStyles36();
   const linkColor = reactComponents.tokens.colorBrandBackground;
   const bookingTerms = labels.bookingTerms;
   const agreementTerms = [
@@ -15252,7 +15500,7 @@ var PriceDetailsTerms = ({
     ] })
   ] });
 };
-var useStyles36 = reactComponents.makeStyles({
+var useStyles37 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -15329,8 +15577,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) {
@@ -15389,7 +15637,7 @@ var CardPriceDetails = ({
 };
 
 // src/components/CardPaymentMethodList/CardPaymentMethodList.constants.ts
-var DEFAULT_LABELS35 = {
+var DEFAULT_LABELS36 = {
   id: {
     selectAriaLabel: "Pilih metode pembayaran"
   },
@@ -15397,7 +15645,7 @@ var DEFAULT_LABELS35 = {
     selectAriaLabel: "Select payment method"
   }
 };
-var useStyles37 = reactComponents.makeStyles({
+var useStyles38 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -15457,8 +15705,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__ */ 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: [
@@ -15507,7 +15755,7 @@ var CardPaymentMethodList = ({
 };
 
 // src/components/CardPaymentGuide/CardPaymentGuide.constants.ts
-var DEFAULT_LABELS36 = {
+var DEFAULT_LABELS37 = {
   id: {
     title: "Cara Pembayaran"
   },
@@ -15515,7 +15763,7 @@ var DEFAULT_LABELS36 = {
     title: "Payment Method"
   }
 };
-var useStyles38 = reactComponents.makeStyles({
+var useStyles39 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -15551,8 +15799,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__ */ 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 }) }),
@@ -15571,7 +15819,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",
@@ -15591,7 +15839,7 @@ var DEFAULT_LABELS37 = {
     changePayment: "Change Payment Method"
   }
 };
-var useStyles39 = reactComponents.makeStyles({
+var useStyles40 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -15683,8 +15931,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__ */ 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 }),
@@ -15756,7 +16004,7 @@ var CardPaymentInfo = ({
 };
 
 // src/components/CardStatusOrder/CardStatusOrder.constants.ts
-var DEFAULT_LABELS38 = {
+var DEFAULT_LABELS39 = {
   id: {
     detailTitle: "Detail Pemesanan",
     statusLabel: "Status",
@@ -15786,7 +16034,7 @@ var DEFAULT_LABELS38 = {
     illustrationAlt: "E-Ticket Illustration"
   }
 };
-var useStyles40 = reactComponents.makeStyles({
+var useStyles41 = reactComponents.makeStyles({
   activeCard: {
     width: "100%",
     // padding: tokens.spacingHorizontalNone, // default
@@ -15856,8 +16104,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;
@@ -15954,7 +16202,7 @@ var CardStatusOrder = ({
 };
 
 // src/components/ModalPriceDetail/ModalPriceDetail.constants.ts
-var DEFAULT_LABELS39 = {
+var DEFAULT_LABELS40 = {
   id: {
     title: "Rincian Harga",
     addonHeader: "Add On",
@@ -15980,7 +16228,7 @@ var DEFAULT_LABELS39 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles41 = reactComponents.makeStyles({
+var useStyles42 = reactComponents.makeStyles({
   surface: {
     width: "680px",
     maxWidth: "90vw",
@@ -16107,8 +16355,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__ */ jsxRuntime.jsx(
     reactComponents.Dialog,
     {
@@ -16250,7 +16498,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.",
@@ -16268,7 +16516,7 @@ var DEFAULT_LABELS40 = {
     downloadTemplateDocument: "Download Template Document"
   }
 };
-var useStyles42 = reactComponents.makeStyles({
+var useStyles43 = reactComponents.makeStyles({
   surface: {
     maxWidth: "90vw",
     maxHeight: "90vh",
@@ -16295,7 +16543,7 @@ var ModalPreviewImage = ({
   imageUrl,
   alt = "Preview"
 }) => {
-  const styles = useStyles42();
+  const styles = useStyles43();
   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,
@@ -16421,7 +16669,7 @@ var FileUpload = React__default.default.forwardRef(
     downloadTemplateDocument = false,
     infoLabel
   }, ref) => {
-    const mergedLabels = { ...DEFAULT_LABELS40[language], ...customLabels };
+    const mergedLabels = { ...DEFAULT_LABELS41[language], ...customLabels };
     const styles = uploadStyles();
     const fileInputRef = React.useRef(null);
     const [, setIsDragOver] = React.useState(false);
@@ -16858,11 +17106,11 @@ function hexToRgba(hex, alpha = 1) {
 }
 
 // src/components/CardProfileMenu/CardProfileMenu.constants.ts
-var DEFAULT_LABELS41 = {
+var DEFAULT_LABELS42 = {
   id: {},
   en: {}
 };
-var useStyles43 = reactComponents.makeStyles({
+var useStyles44 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -16922,8 +17170,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);
   };
@@ -16960,6 +17208,7 @@ exports.BackgroundTicketCardVertical = BackgroundTicketCardVertical_default;
 exports.COUNTRIES = COUNTRIES;
 exports.CardAddon = CardAddon;
 exports.CardBanner = CardBanner;
+exports.CardBookingAddOn = CardBookingAddOn;
 exports.CardBookingTicket = CardBookingTicket;
 exports.CardFAQ = CardFAQ;
 exports.CardMealCatalog = CardMealCatalog;