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

package/dist/index.mjs

@@ -275,7 +275,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"
 };
@@ -14859,7 +14862,7 @@ var CardAddon = ({
           /* @__PURE__ */ jsxs(Caption1Stronger, { children: [
             mergedLabels.currencySymbol,
             " ",
-            footerData.price.toLocaleString(
+            footerData.price?.toLocaleString(
               language === "id" ? "id-ID" : "en-US"
             ),
             footerData.priceUnit
@@ -15010,7 +15013,7 @@ var CardAddon = ({
           /* @__PURE__ */ jsxs(Subtitle1, { style: { fontSize: tokens.fontSizeBase600 }, children: [
             mergedLabels.currencySymbol,
             " ",
-            footerData.price.toLocaleString(
+            footerData.price?.toLocaleString(
               language === "id" ? "id-ID" : "en-US"
             )
           ] })
@@ -15360,7 +15363,8 @@ var CardReview = ({
   items,
   children,
   className,
-  headerAction
+  headerAction,
+  isLoading = false
 }) => {
   const styles = useStyles33();
   const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
@@ -15371,39 +15375,60 @@ var CardReview = ({
       headerAction && /* @__PURE__ */ jsx("div", { children: headerAction })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: styles.contentContainer, children: [
-      items?.map((item, index) => /* @__PURE__ */ jsxs("div", { className: `${styles.row} ${item.className || ""}`, children: [
-        typeof item.label === "string" ? /* @__PURE__ */ jsx(
-          Caption1,
-          {
-            className: `${styles.defaultLabel} ${item.labelClassName || ""}`,
-            children: item.label
-          }
-        ) : (
-          // Clone element to append className if it's a valid React element
-          React.isValidElement(item.label) ? React.cloneElement(item.label, {
-            className: `${styles.defaultLabel} ${item.labelClassName || ""}${item.label.props.className ? " " + item.label.props.className : ""}`
-          }) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `${styles.defaultLabel} ${item.labelClassName || ""}`,
-              children: item.label
-            }
-          )
-        ),
-        typeof item.value === "string" || typeof item.value === "number" ? /* @__PURE__ */ jsx(
-          Body1,
-          {
-            className: `${styles.defaultValue} ${item.valueClassName || ""}`,
-            children: item.value
-          }
-        ) : /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `${styles.defaultValue} ${item.valueClassName || ""}`,
-            children: item.value
-          }
-        )
-      ] }, index)),
+      isLoading ? /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsx("div", { className: styles.row, children: /* @__PURE__ */ jsxs(
+        Skeleton,
+        {
+          style: { width: "100%", display: "flex", gap: "1rem" },
+          children: [
+            /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "40%", height: "16px" } }),
+            /* @__PURE__ */ jsx(
+              SkeletonItem,
+              {
+                style: { width: "30%", height: "16px", marginLeft: "auto" }
+              }
+            )
+          ]
+        }
+      ) }, index)) }) : /* @__PURE__ */ jsx(Fragment, { children: items?.map((item, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${styles.row} ${item.className || ""}`,
+          children: [
+            typeof item.label === "string" ? /* @__PURE__ */ jsx(
+              Caption1,
+              {
+                className: `${styles.defaultLabel} ${item.labelClassName || ""}`,
+                children: item.label
+              }
+            ) : (
+              // Clone element to append className if it's a valid React element
+              React.isValidElement(item.label) ? React.cloneElement(item.label, {
+                className: `${styles.defaultLabel} ${item.labelClassName || ""}${item.label.props.className ? " " + item.label.props.className : ""}`
+              }) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `${styles.defaultLabel} ${item.labelClassName || ""}`,
+                  children: item.label
+                }
+              )
+            ),
+            typeof item.value === "string" || typeof item.value === "number" ? /* @__PURE__ */ jsx(
+              Body1,
+              {
+                className: `${styles.defaultValue} ${item.valueClassName || ""}`,
+                children: item.value
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `${styles.defaultValue} ${item.valueClassName || ""}`,
+                children: item.value
+              }
+            )
+          ]
+        },
+        index
+      )) }),
       children
     ] })
   ] });
@@ -15492,7 +15517,8 @@ var CardReviewPassenger = ({
   labels,
   title,
   passengers,
-  className
+  className,
+  isLoading = false
 }) => {
   const styles = useStyles34();
   const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
@@ -15502,7 +15528,13 @@ var CardReviewPassenger = ({
       /* @__PURE__ */ jsx(Subtitle1, { children: displayTitle }),
       /* @__PURE__ */ jsx(Divider, { className: styles.titleDivider })
     ] }) }),
-    passengers.map((passenger, index) => {
+    isLoading ? Array.from({ length: 2 }).map((_, index) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Card, { className: styles.passengerCard, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.passengerRow, children: [
+      /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs(Skeleton, { children: [
+        /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "180px", height: "18px", marginBottom: "8px" } }),
+        /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "220px", height: "16px" } })
+      ] }) }),
+      /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(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__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Card, { className: styles.passengerCard, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.passengerRow, children: [
@@ -15545,7 +15577,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",
@@ -15557,7 +15591,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 = makeStyles({
@@ -15580,59 +15616,211 @@ var useStyles35 = makeStyles({
     alignItems: "center",
     justifyContent: "space-between",
     width: "100%"
+  },
+  badgeLilac: {
+    borderRadius: tokens.borderRadiusXLarge,
+    border: `0px solid ${sharedColors.Shared_Lilac_Tint_40}`,
+    color: sharedColors.Shared_Lilac_Primary,
+    backgroundColor: sharedColors.Shared_Lilac_Tint_60
+  },
+  badgeOrange: {
+    borderRadius: tokens.borderRadiusXLarge,
+    border: `0px solid ${tokens.colorStatusWarningForeground2}`,
+    color: tokens.colorStatusWarningForeground2,
+    backgroundColor: sharedColors.Shared_Orange_Tint_60
   }
 });
+var TripSection = ({ data, label, badgeClassName, mergedLabels, onViewAddOns }) => {
+  const styles = useStyles35();
+  return /* @__PURE__ */ jsxs(Row, { nogutter: true, direction: "column", style: { gap: tokens.spacingHorizontalL }, children: [
+    label && /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(
+      Badge,
+      {
+        size: "extra-large",
+        appearance: "tint",
+        shape: "circular",
+        className: badgeClassName,
+        children: label
+      }
+    ) }),
+    /* @__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: data.from }) }) }),
+      /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsx(Field, { label: mergedLabels.toLabel, children: /* @__PURE__ */ jsx(Body1Strong, { children: data.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: data.scheduleTime }) }) }),
+      /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsx(Field, { label: mergedLabels.bookingNameLabel, children: /* @__PURE__ */ jsx(Body1Strong, { children: data.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: data.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: data.addOnsCount === 0 ? mergedLabels.noAddOnsLabel : `${data.addOnsCount} ${data.addOnsCount === 1 ? mergedLabels.serviceLabel : mergedLabels.serviceLabel}` }),
+        data.addOnsCount > 0 && /* @__PURE__ */ jsx(
+          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__ */ jsx(Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Card, { className: `${styles.card} ${className || ""}`, children: isLoading ? /* @__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__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "30%", height: "24px" } }) }) }),
         /* @__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, sm: 12, md: 6, children: /* @__PURE__ */ jsxs(Skeleton, { children: [
+            /* @__PURE__ */ jsx(
+              SkeletonItem,
+              {
+                style: {
+                  width: "100%",
+                  height: "20px",
+                  marginBottom: "8px"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80%", height: "20px" } })
+          ] }) }),
+          /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxs(Skeleton, { children: [
+            /* @__PURE__ */ jsx(
+              SkeletonItem,
+              {
+                style: {
+                  width: "100%",
+                  height: "20px",
+                  marginBottom: "8px"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80%", height: "20px" } })
+          ] }) })
         ] }) }),
         /* @__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, sm: 12, md: 6, children: /* @__PURE__ */ jsxs(Skeleton, { children: [
+            /* @__PURE__ */ jsx(
+              SkeletonItem,
+              {
+                style: {
+                  width: "100%",
+                  height: "20px",
+                  marginBottom: "8px"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80%", height: "20px" } })
+          ] }) }),
+          /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxs(Skeleton, { children: [
+            /* @__PURE__ */ jsx(
+              SkeletonItem,
+              {
+                style: {
+                  width: "100%",
+                  height: "20px",
+                  marginBottom: "8px"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80%", height: "20px" } })
+          ] }) })
         ] }) }),
         /* @__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,
+          /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxs(Skeleton, { children: [
+            /* @__PURE__ */ jsx(
+              SkeletonItem,
               {
-                appearance: "transparent",
-                onClick: onViewAddOns,
-                style: { color: brandColors[80] },
-                children: mergedLabels.viewDetail
+                style: {
+                  width: "100%",
+                  height: "20px",
+                  marginBottom: "8px"
+                }
               }
-            )
-          ] }) }) })
+            ),
+            /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80%", height: "20px" } })
+          ] }) }),
+          /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxs(Skeleton, { children: [
+            /* @__PURE__ */ jsx(
+              SkeletonItem,
+              {
+                style: {
+                  width: "100%",
+                  height: "20px",
+                  marginBottom: "8px"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80%", height: "20px" } })
+          ] }) })
         ] }) })
       ]
     }
-  ) });
+  ) : /* @__PURE__ */ jsxs(Fragment, { 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__ */ jsx(
+            TripSection,
+            {
+              data: departureData,
+              label: isRoundTrip ? mergedLabels.departureLabel : void 0,
+              badgeClassName: isRoundTrip ? styles.badgeLilac : void 0,
+              mergedLabels,
+              onViewAddOns
+            }
+          ) })
+        ]
+      }
+    ),
+    isRoundTrip && returnData && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, { style: { margin: `${tokens.spacingHorizontalL} 0` } }),
+      /* @__PURE__ */ jsx(
+        Row,
+        {
+          nogutter: true,
+          direction: "column",
+          style: { gap: tokens.spacingHorizontalL },
+          children: /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(
+            TripSection,
+            {
+              data: returnData,
+              label: mergedLabels.returnLabel,
+              badgeClassName: styles.badgeOrange,
+              mergedLabels,
+              onViewAddOns
+            }
+          ) })
+        }
+      )
+    ] })
+  ] }) });
 };
 
 // src/components/CardPriceDetails/CardPriceDetails.constants.ts