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

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"
 };
@@ -363,67 +366,6 @@ var extendedTokens = {
   colorBrandForegroundLinkSelected: customBrand[110]});
 
 // src/constants/api.ts
-var API_ENDPOINTS = {
-  PORTS: {
-    ORIGIN: "/v1/surrounding/catalog/ports/list/origin",
-    DESTINATION: "/v1/surrounding/catalog/ports/list/destination"
-  },
-  SERVICES: {
-    LIST: "/v1/surrounding/catalog/service-types"
-  },
-  PASSENGERS: {
-    LIST: "/v1/surrounding/catalog/passenger-types"
-  },
-  // Authentication endpoints
-  AUTH: {
-    LOGIN: "/v1/surrounding/auth/login",
-    REGISTER: "/auth/register",
-    LOGOUT: "/auth/logout",
-    REFRESH: "/auth/refresh",
-    PROFILE: "/auth/profile",
-    UPDATE_PROFILE: "/auth/profile",
-    CHANGE_PASSWORD: "/auth/change-password",
-    FORGOT_PASSWORD: "/auth/forgot-password",
-    RESET_PASSWORD: "/auth/reset-password",
-    VERIFY_EMAIL: "/auth/verify-email"
-  },
-  // User management
-  USERS: {
-    LIST: "/users",
-    CREATE: "/users",
-    DETAIL: (id) => `/users/${id}`,
-    UPDATE: (id) => `/users/${id}`,
-    DELETE: (id) => `/users/${id}`,
-    AVATAR: (id) => `/users/${id}/avatar`
-  },
-  // File management
-  FILES: {
-    UPLOAD: "/files/upload",
-    DOWNLOAD: (id) => `/files/${id}/download`,
-    DELETE: (id) => `/files/${id}`,
-    LIST: "/files"
-  },
-  // Dashboard/Analytics
-  DASHBOARD: {
-    STATS: "/dashboard/stats",
-    CHART_DATA: "/dashboard/chart-data",
-    RECENT_ACTIVITIES: "/dashboard/recent-activities"
-  },
-  // Notifications
-  NOTIFICATIONS: {
-    LIST: "/notifications",
-    MARK_READ: (id) => `/notifications/${id}/read`,
-    MARK_ALL_READ: "/notifications/read-all",
-    DELETE: (id) => `/notifications/${id}`,
-    SETTINGS: "/notifications/settings"
-  },
-  // Settings
-  SETTINGS: {
-    GENERAL: "/settings/general",
-    SECURITY: "/settings/security",
-    PREFERENCES: "/settings/preferences"
-  }
-};
 var API_CONFIG = {
   TIMEOUT: 3e4,
   RETRY_ATTEMPTS: 3,
@@ -14868,7 +14810,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 +14961,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 +15311,8 @@ var CardReview = ({
   items,
   children,
   className,
-  headerAction
+  headerAction,
+  isLoading = false
 }) => {
   const styles = useStyles33();
   const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
@@ -15380,39 +15323,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 +15465,8 @@ var CardReviewPassenger = ({
   labels,
   title,
   passengers,
-  className
+  className,
+  isLoading = false
 }) => {
   const styles = useStyles34();
   const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
@@ -15511,7 +15476,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 +15525,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 +15539,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 +15564,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
@@ -17424,7 +17551,6 @@ var CardProfileMenu = ({
 };
 
 exports.API_CONFIG = API_CONFIG;
-exports.API_ENDPOINTS = API_ENDPOINTS;
 exports.API_ERROR_MESSAGES = API_ERROR_MESSAGES;
 exports.BackgroundTicketCard = BackgroundTicketCard_default;
 exports.BackgroundTicketCardVertical = BackgroundTicketCardVertical_default;