@asdp/ferryui 0.1.22-dev.10229 → 0.1.22-dev.10231

package/dist/index.d.mts

@@ -3384,7 +3384,7 @@ declare const CardFAQ: React$1.FC<CardFAQProps>;
 
 interface AddonFooterData {
     priceLabel: string;
-    price: number;
+    price?: number;
     priceUnit?: string;
     actionLabel?: string;
     onActionClick?: () => void;
@@ -3602,6 +3602,11 @@ interface CardReviewProps {
      * Optional action in the header (e.g. Ubah button) - though not present in current designs, good for extensibility
      */
     headerAction?: React$1.ReactNode;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
 }
 
 declare const CardReview: React$1.FC<CardReviewProps>;
@@ -3641,10 +3646,41 @@ interface CardReviewPassengerProps {
      * Optional class name
      */
     className?: string;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
 }
 
 declare const CardReviewPassenger: React$1.FC<CardReviewPassengerProps>;
 
+interface TripData {
+    /**
+     * Origin location (e.g., "Merak, Banten")
+     */
+    from: string;
+    /**
+     * Destination location (e.g., "Bakehuni, Lampung")
+     */
+    to: string;
+    /**
+     * Schedule entry time (e.g., "Kam, 27 Nov 2025, 18:15")
+     */
+    scheduleTime: string;
+    /**
+     * Booking name
+     */
+    bookingName: string;
+    /**
+     * Passenger type/vehicle info (e.g., "Golongan VIB • Mobil Pickup • B 1234 CD")
+     */
+    passengerType: string;
+    /**
+     * Number of add-ons/services
+     */
+    addOnsCount: number;
+}
 interface CardReviewDetailLabels {
     title: string;
     fromLabel: string;
@@ -3656,6 +3692,8 @@ interface CardReviewDetailLabels {
     viewDetail: string;
     noAddOnsLabel: string;
     serviceLabel: string;
+    departureLabel: string;
+    returnLabel: string;
 }
 interface CardReviewDetailProps {
     /**
@@ -3668,29 +3706,13 @@ interface CardReviewDetailProps {
      */
     labels?: Partial<CardReviewDetailLabels>;
     /**
-     * Origin location (e.g., "Merak, Banten")
-     */
-    from: string;
-    /**
-     * Destination location (e.g., "Bakehuni, Lampung")
-     */
-    to: string;
-    /**
-     * Schedule entry time (e.g., "Kam, 27 Nov 2025, 18:15")
-     */
-    scheduleTime: string;
-    /**
-     * Booking name
-     */
-    bookingName: string;
-    /**
-     * Passenger type/vehicle info (e.g., "Golongan VIB • Mobil Pickup • B 1234 CD")
+     * Departure trip data
      */
-    passengerType: string;
+    departureData: TripData;
     /**
-     * Number of add-ons/services
+     * Return trip data (only used when isRoundTrip is true)
      */
-    addOnsCount: number;
+    returnData?: TripData;
     /**
      * Callback when "View Detail" button is clicked
      */
@@ -3699,6 +3721,16 @@ interface CardReviewDetailProps {
      * Optional class name
      */
     className?: string;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Indicate if the trip is round-trip, which will conditionally render return badge and section
+     * @default false
+     */
+    isRoundTrip?: boolean;
 }
 
 declare const CardReviewDetail: React$1.FC<CardReviewDetailProps>;

package/dist/index.d.ts

@@ -3384,7 +3384,7 @@ declare const CardFAQ: React$1.FC<CardFAQProps>;
 
 interface AddonFooterData {
     priceLabel: string;
-    price: number;
+    price?: number;
     priceUnit?: string;
     actionLabel?: string;
     onActionClick?: () => void;
@@ -3602,6 +3602,11 @@ interface CardReviewProps {
      * Optional action in the header (e.g. Ubah button) - though not present in current designs, good for extensibility
      */
     headerAction?: React$1.ReactNode;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
 }
 
 declare const CardReview: React$1.FC<CardReviewProps>;
@@ -3641,10 +3646,41 @@ interface CardReviewPassengerProps {
      * Optional class name
      */
     className?: string;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
 }
 
 declare const CardReviewPassenger: React$1.FC<CardReviewPassengerProps>;
 
+interface TripData {
+    /**
+     * Origin location (e.g., "Merak, Banten")
+     */
+    from: string;
+    /**
+     * Destination location (e.g., "Bakehuni, Lampung")
+     */
+    to: string;
+    /**
+     * Schedule entry time (e.g., "Kam, 27 Nov 2025, 18:15")
+     */
+    scheduleTime: string;
+    /**
+     * Booking name
+     */
+    bookingName: string;
+    /**
+     * Passenger type/vehicle info (e.g., "Golongan VIB • Mobil Pickup • B 1234 CD")
+     */
+    passengerType: string;
+    /**
+     * Number of add-ons/services
+     */
+    addOnsCount: number;
+}
 interface CardReviewDetailLabels {
     title: string;
     fromLabel: string;
@@ -3656,6 +3692,8 @@ interface CardReviewDetailLabels {
     viewDetail: string;
     noAddOnsLabel: string;
     serviceLabel: string;
+    departureLabel: string;
+    returnLabel: string;
 }
 interface CardReviewDetailProps {
     /**
@@ -3668,29 +3706,13 @@ interface CardReviewDetailProps {
      */
     labels?: Partial<CardReviewDetailLabels>;
     /**
-     * Origin location (e.g., "Merak, Banten")
-     */
-    from: string;
-    /**
-     * Destination location (e.g., "Bakehuni, Lampung")
-     */
-    to: string;
-    /**
-     * Schedule entry time (e.g., "Kam, 27 Nov 2025, 18:15")
-     */
-    scheduleTime: string;
-    /**
-     * Booking name
-     */
-    bookingName: string;
-    /**
-     * Passenger type/vehicle info (e.g., "Golongan VIB • Mobil Pickup • B 1234 CD")
+     * Departure trip data
      */
-    passengerType: string;
+    departureData: TripData;
     /**
-     * Number of add-ons/services
+     * Return trip data (only used when isRoundTrip is true)
      */
-    addOnsCount: number;
+    returnData?: TripData;
     /**
      * Callback when "View Detail" button is clicked
      */
@@ -3699,6 +3721,16 @@ interface CardReviewDetailProps {
      * Optional class name
      */
     className?: string;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Indicate if the trip is round-trip, which will conditionally render return badge and section
+     * @default false
+     */
+    isRoundTrip?: boolean;
 }
 
 declare const CardReviewDetail: React$1.FC<CardReviewDetailProps>;

package/dist/index.js

@@ -284,7 +284,10 @@ var sharedColors = {
   "Shared_Red_Primary": "#d13438",
   "Shared_Orange_Shade_20": "#bc4b09",
   "Shared_Orange_Tint_60": "#fff9f5",
-  "Shared_Green_Primary": "#107c10"};
+  "Shared_Green_Primary": "#107c10",
+  "Shared_Lilac_Primary": "#b146c2",
+  "Shared_Lilac_Tint_40": "#e6bfed",
+  "Shared_Lilac_Tint_60": "#fcf6fd"};
 var foundationColors = {
   "Foundation_Danger_error": "#FD3A3A"
 };
@@ -14868,7 +14871,7 @@ var CardAddon = ({
           /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption1Stronger, { children: [
             mergedLabels.currencySymbol,
             " ",
-            footerData.price.toLocaleString(
+            footerData.price?.toLocaleString(
               language === "id" ? "id-ID" : "en-US"
             ),
             footerData.priceUnit
@@ -15019,7 +15022,7 @@ var CardAddon = ({
           /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle1, { style: { fontSize: reactComponents.tokens.fontSizeBase600 }, children: [
             mergedLabels.currencySymbol,
             " ",
-            footerData.price.toLocaleString(
+            footerData.price?.toLocaleString(
               language === "id" ? "id-ID" : "en-US"
             )
           ] })
@@ -15369,7 +15372,8 @@ var CardReview = ({
   items,
   children,
   className,
-  headerAction
+  headerAction,
+  isLoading = false
 }) => {
   const styles = useStyles33();
   const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
@@ -15380,39 +15384,60 @@ var CardReview = ({
       headerAction && /* @__PURE__ */ jsxRuntime.jsx("div", { children: headerAction })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.contentContainer, children: [
-      items?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.row} ${item.className || ""}`, children: [
-        typeof item.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-          reactComponents.Caption1,
-          {
-            className: `${styles.defaultLabel} ${item.labelClassName || ""}`,
-            children: item.label
-          }
-        ) : (
-          // Clone element to append className if it's a valid React element
-          React__default.default.isValidElement(item.label) ? React__default.default.cloneElement(item.label, {
-            className: `${styles.defaultLabel} ${item.labelClassName || ""}${item.label.props.className ? " " + item.label.props.className : ""}`
-          }) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: `${styles.defaultLabel} ${item.labelClassName || ""}`,
-              children: item.label
-            }
-          )
-        ),
-        typeof item.value === "string" || typeof item.value === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
-          reactComponents.Body1,
-          {
-            className: `${styles.defaultValue} ${item.valueClassName || ""}`,
-            children: item.value
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `${styles.defaultValue} ${item.valueClassName || ""}`,
-            children: item.value
-          }
-        )
-      ] }, index)),
+      isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.row, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        reactComponents.Skeleton,
+        {
+          style: { width: "100%", display: "flex", gap: "1rem" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "40%", height: "16px" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.SkeletonItem,
+              {
+                style: { width: "30%", height: "16px", marginLeft: "auto" }
+              }
+            )
+          ]
+        }
+      ) }, index)) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `${styles.row} ${item.className || ""}`,
+          children: [
+            typeof item.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Caption1,
+              {
+                className: `${styles.defaultLabel} ${item.labelClassName || ""}`,
+                children: item.label
+              }
+            ) : (
+              // Clone element to append className if it's a valid React element
+              React__default.default.isValidElement(item.label) ? React__default.default.cloneElement(item.label, {
+                className: `${styles.defaultLabel} ${item.labelClassName || ""}${item.label.props.className ? " " + item.label.props.className : ""}`
+              }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `${styles.defaultLabel} ${item.labelClassName || ""}`,
+                  children: item.label
+                }
+              )
+            ),
+            typeof item.value === "string" || typeof item.value === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Body1,
+              {
+                className: `${styles.defaultValue} ${item.valueClassName || ""}`,
+                children: item.value
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `${styles.defaultValue} ${item.valueClassName || ""}`,
+                children: item.value
+              }
+            )
+          ]
+        },
+        index
+      )) }),
       children
     ] })
   ] });
@@ -15501,7 +15526,8 @@ var CardReviewPassenger = ({
   labels,
   title,
   passengers,
-  className
+  className,
+  isLoading = false
 }) => {
   const styles = useStyles34();
   const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
@@ -15511,7 +15537,13 @@ var CardReviewPassenger = ({
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: displayTitle }),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.titleDivider })
     ] }) }),
-    passengers.map((passenger, index) => {
+    isLoading ? Array.from({ length: 2 }).map((_, index) => /* @__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(reactComponents.Skeleton, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "180px", height: "18px", marginBottom: "8px" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "220px", height: "16px" } })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "90px", height: "32px" } }) }) })
+    ] }) }) }, index)) : passengers.map((passenger, index) => {
       const badgeConfig = getBadgeConfig(passenger.serviceClass);
       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: [
@@ -15554,7 +15586,9 @@ var DEFAULT_LABELS34 = {
     addOnLabel: "Add On",
     viewDetail: "Lihat Detail",
     noAddOnsLabel: "Tidak ada layanan",
-    serviceLabel: "Layanan"
+    serviceLabel: "Layanan",
+    departureLabel: "Pulang Pergi (Keberangkatan)",
+    returnLabel: "Pulang Pergi (Kepulangan)"
   },
   en: {
     title: "Booking Details",
@@ -15566,7 +15600,9 @@ var DEFAULT_LABELS34 = {
     addOnLabel: "Add On",
     viewDetail: "View Details",
     noAddOnsLabel: "No services",
-    serviceLabel: "Service"
+    serviceLabel: "Service",
+    departureLabel: "Round Trip (Departure)",
+    returnLabel: "Round Trip (Return)"
   }
 };
 var useStyles35 = reactComponents.makeStyles({
@@ -15589,59 +15625,211 @@ var useStyles35 = reactComponents.makeStyles({
     alignItems: "center",
     justifyContent: "space-between",
     width: "100%"
+  },
+  badgeLilac: {
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    border: `0px solid ${sharedColors.Shared_Lilac_Tint_40}`,
+    color: sharedColors.Shared_Lilac_Primary,
+    backgroundColor: sharedColors.Shared_Lilac_Tint_60
+  },
+  badgeOrange: {
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    border: `0px solid ${reactComponents.tokens.colorStatusWarningForeground2}`,
+    color: reactComponents.tokens.colorStatusWarningForeground2,
+    backgroundColor: sharedColors.Shared_Orange_Tint_60
   }
 });
+var TripSection = ({ data, label, badgeClassName, mergedLabels, onViewAddOns }) => {
+  const styles = useStyles35();
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, direction: "column", style: { gap: reactComponents.tokens.spacingHorizontalL }, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.Badge,
+      {
+        size: "extra-large",
+        appearance: "tint",
+        shape: "circular",
+        className: badgeClassName,
+        children: label
+      }
+    ) }),
+    /* @__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: data.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: data.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: data.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: data.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: data.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: data.addOnsCount === 0 ? mergedLabels.noAddOnsLabel : `${data.addOnsCount} ${data.addOnsCount === 1 ? mergedLabels.serviceLabel : mergedLabels.serviceLabel}` }),
+        data.addOnsCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Button,
+          {
+            appearance: "transparent",
+            onClick: onViewAddOns,
+            style: { color: brandColors[80] },
+            children: mergedLabels.viewDetail
+          }
+        )
+      ] }) }) })
+    ] }) })
+  ] });
+};
 var CardReviewDetail = ({
   language = "id",
   labels,
-  from,
-  to,
-  scheduleTime,
-  bookingName,
-  passengerType,
-  addOnsCount,
+  departureData,
+  returnData,
   onViewAddOns,
-  className
+  className,
+  isLoading = false,
+  isRoundTrip = false
 }) => {
   const styles = useStyles35();
   const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
-  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: isLoading ? /* @__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.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "30%", height: "24px" } }) }) }),
         /* @__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, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.SkeletonItem,
+              {
+                style: {
+                  width: "100%",
+                  height: "20px",
+                  marginBottom: "8px"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "20px" } })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.SkeletonItem,
+              {
+                style: {
+                  width: "100%",
+                  height: "20px",
+                  marginBottom: "8px"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "20px" } })
+          ] }) })
         ] }) }),
         /* @__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, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.SkeletonItem,
+              {
+                style: {
+                  width: "100%",
+                  height: "20px",
+                  marginBottom: "8px"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "20px" } })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.SkeletonItem,
+              {
+                style: {
+                  width: "100%",
+                  height: "20px",
+                  marginBottom: "8px"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "20px" } })
+          ] }) })
         ] }) }),
         /* @__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,
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.SkeletonItem,
               {
-                appearance: "transparent",
-                onClick: onViewAddOns,
-                style: { color: brandColors[80] },
-                children: mergedLabels.viewDetail
+                style: {
+                  width: "100%",
+                  height: "20px",
+                  marginBottom: "8px"
+                }
               }
-            )
-          ] }) }) })
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "20px" } })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.SkeletonItem,
+              {
+                style: {
+                  width: "100%",
+                  height: "20px",
+                  marginBottom: "8px"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "20px" } })
+          ] }) })
         ] }) })
       ]
     }
-  ) });
+  ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { 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.jsx(
+            TripSection,
+            {
+              data: departureData,
+              label: isRoundTrip ? mergedLabels.departureLabel : void 0,
+              badgeClassName: isRoundTrip ? styles.badgeLilac : void 0,
+              mergedLabels,
+              onViewAddOns
+            }
+          ) })
+        ]
+      }
+    ),
+    isRoundTrip && returnData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { style: { margin: `${reactComponents.tokens.spacingHorizontalL} 0` } }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactGridSystem.Row,
+        {
+          nogutter: true,
+          direction: "column",
+          style: { gap: reactComponents.tokens.spacingHorizontalL },
+          children: /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+            TripSection,
+            {
+              data: returnData,
+              label: mergedLabels.returnLabel,
+              badgeClassName: styles.badgeOrange,
+              mergedLabels,
+              onViewAddOns
+            }
+          ) })
+        }
+      )
+    ] })
+  ] }) });
 };
 
 // src/components/CardPriceDetails/CardPriceDetails.constants.ts