@asdp/ferryui 0.1.22-dev.10391 → 0.1.22-dev.10407

package/dist/index.d.mts

@@ -3145,6 +3145,9 @@ interface CardBookingTicketLabels {
     routeTitle: string;
     estimationPrefix: string;
     totalPriceLabel: string;
+    agreementPrefix: string;
+    termsAndConditions: string;
+    agreementSuffix: string;
     nextButton: string;
     cancelButton: string;
     previousButton: string;
@@ -3235,6 +3238,10 @@ interface CardBookingTicketProps {
      * Callback for price detail click
      */
     onPriceDetailClick: () => void;
+    /**
+     * Optional click handler for Terms & Conditions text inside the review checkbox
+     */
+    onTermsAndConditionsClick?: () => void;
     onCancel: () => void;
     /**
      * Callback for Next button (Lanjutkan / Lihat Pemesanan)
@@ -3573,6 +3580,7 @@ declare const CardReview: React$1.FC<CardReviewProps>;
 
 interface ReviewPassengerItem {
     id: string | number;
+    titleName?: string;
     name: string;
     identityNumber: string;
     ageLabel: string;

package/dist/index.d.ts

@@ -3145,6 +3145,9 @@ interface CardBookingTicketLabels {
     routeTitle: string;
     estimationPrefix: string;
     totalPriceLabel: string;
+    agreementPrefix: string;
+    termsAndConditions: string;
+    agreementSuffix: string;
     nextButton: string;
     cancelButton: string;
     previousButton: string;
@@ -3235,6 +3238,10 @@ interface CardBookingTicketProps {
      * Callback for price detail click
      */
     onPriceDetailClick: () => void;
+    /**
+     * Optional click handler for Terms & Conditions text inside the review checkbox
+     */
+    onTermsAndConditionsClick?: () => void;
     onCancel: () => void;
     /**
      * Callback for Next button (Lanjutkan / Lihat Pemesanan)
@@ -3573,6 +3580,7 @@ declare const CardReview: React$1.FC<CardReviewProps>;
 
 interface ReviewPassengerItem {
     id: string | number;
+    titleName?: string;
     name: string;
     identityNumber: string;
     ageLabel: string;

package/dist/index.js

@@ -292,6 +292,8 @@ var foundationColors = {
   "Foundation_Danger_error": "#FD3A3A"
 };
 var lightModeColors = {
+  "Neutral_Background_2_Hover": "#f0f0f0",
+  "Neutral_Background_3_Pressed": "#d6d6d6",
   "Neutral_Foreground_Disabled_Rest": "#bdbdbd",
   "Brand_Stroke_1_Rest": "#00B3BD"};
 var tokensV2_default = {
@@ -13890,6 +13892,9 @@ var DEFAULT_LABELS27 = {
     routeTitle: "Rute Perjalanan",
     estimationPrefix: "Estimasi",
     totalPriceLabel: "Total Harga",
+    agreementPrefix: "Saya menyetujui",
+    termsAndConditions: "Syarat & Ketentuan",
+    agreementSuffix: "Ferizy",
     nextButton: "Lanjutkan",
     cancelButton: "Batalkan Pesanan",
     previousButton: "Sebelumnya",
@@ -13907,6 +13912,9 @@ var DEFAULT_LABELS27 = {
     routeTitle: "Travel Route",
     estimationPrefix: "Estimation",
     totalPriceLabel: "Total Price",
+    agreementPrefix: "I agree to the",
+    termsAndConditions: "Terms & Conditions",
+    agreementSuffix: "Ferizy",
     nextButton: "Continue",
     cancelButton: "Cancel Booking",
     previousButton: "Previous",
@@ -13995,7 +14003,14 @@ var useStyles28 = reactComponents.makeStyles({
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    gap: "0.5em"
+    gap: "0.5em",
+    backgroundColor: lightModeColors.Neutral_Background_2_Hover,
+    ...reactComponents.shorthands.padding(
+      reactComponents.tokens.spacingHorizontalM,
+      reactComponents.tokens.spacingHorizontalMNudge
+    ),
+    border: `${reactComponents.tokens.strokeWidthThin} solid ${lightModeColors.Neutral_Background_3_Pressed}`,
+    borderRadius: reactComponents.tokens.borderRadiusXLarge
   },
   ticketTime: {
     display: "flex",
@@ -14080,6 +14095,7 @@ var CardBookingTicket = ({
   reservationStep,
   paymentStep,
   onPriceDetailClick,
+  onTermsAndConditionsClick,
   onCancel,
   onNext,
   onPrevious,
@@ -14088,6 +14104,9 @@ var CardBookingTicket = ({
   const styles = useStyles28();
   const mergedLabels = { ...DEFAULT_LABELS27[language], ...labels };
   const [cancelDialogOpen, setCancelDialogOpen] = React.useState(false);
+  const handleTermsAndConditionsClick = () => {
+    onTermsAndConditionsClick?.();
+  };
   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 }),
@@ -14135,7 +14154,7 @@ var CardBookingTicket = ({
         {
           style: {
             height: "1px",
-            backgroundColor: reactComponents.tokens.colorNeutralStroke2,
+            backgroundColor: "tokens.colorNeutralStroke2",
             margin: "1rem 0"
           }
         }
@@ -14167,22 +14186,58 @@ var CardBookingTicket = ({
     /* @__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.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" }
+                }
+              )
+            ]
+          }
+        )
       ] }),
+      reservationStep === "review" && /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.Checkbox,
+        {
+          label: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { children: [
+            mergedLabels.agreementPrefix,
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleTermsAndConditionsClick,
+                style: {
+                  color: brandColors[80],
+                  background: "transparent",
+                  border: "none",
+                  padding: 0,
+                  cursor: "pointer"
+                },
+                children: mergedLabels.termsAndConditions
+              }
+            ),
+            " ",
+            mergedLabels.agreementSuffix
+          ] })
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.gapButton, children: [
         !(paymentStep === "pay") && /* @__PURE__ */ jsxRuntime.jsx(
           reactComponents.Button,
@@ -15475,7 +15530,8 @@ var useStyles34 = reactComponents.makeStyles({
     boxShadow: "none",
     border: `${reactComponents.tokens.strokeWidthThin} solid ${reactComponents.tokens.colorNeutralStroke1}`,
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
-    padding: `${reactComponents.tokens.spacingHorizontalL} ${reactComponents.tokens.spacingHorizontalXXL}`
+    padding: `${reactComponents.tokens.spacingHorizontalL} ${reactComponents.tokens.spacingHorizontalXXL}`,
+    zIndex: 10
   },
   titleRow: {
     display: "flex",
@@ -15562,9 +15618,14 @@ var CardReviewPassenger = ({
     ] }) }) }, index)) : passengers.map((passenger, index) => {
       const badgeConfig = getBadgeConfig(passenger.serviceClass);
       const passengerMeta = `${passenger.ageLabel} \xB7 ${mergedLabels.idNumber} ${passenger.identityNumber}`;
+      const passengerTitle = passenger.titleName?.trim() || "Tuan";
       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: [
         /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.passengerInfo, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: styles.passengerName, children: passenger.name }),
+          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle2, { className: styles.passengerName, children: [
+            passengerTitle,
+            " ",
+            passenger.name
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.passengerMeta, children: passengerMeta })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsxs(