@asdp/ferryui 0.1.22-dev.10403 → 0.1.22-dev.10424

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;
@@ -3156,6 +3159,7 @@ interface CardBookingTicketLabels {
     cancelDialogBody: string;
     cancelDialogConfirm: string;
     cancelDialogDismiss: string;
+    nextPaymentButton: string;
 }
 interface CardBookingTicketProps {
     /**
@@ -3235,6 +3239,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)

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;
@@ -3156,6 +3159,7 @@ interface CardBookingTicketLabels {
     cancelDialogBody: string;
     cancelDialogConfirm: string;
     cancelDialogDismiss: string;
+    nextPaymentButton: string;
 }
 interface CardBookingTicketProps {
     /**
@@ -3235,6 +3239,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)

package/dist/index.js

@@ -13892,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",
@@ -13902,13 +13905,17 @@ var DEFAULT_LABELS27 = {
     cancelDialogTitle: "Buang perubahan?",
     cancelDialogBody: "Perubahan belum disimpan dan akan hilang jika Anda melanjutkan.",
     cancelDialogConfirm: "Buang Perubahan",
-    cancelDialogDismiss: "Batal"
+    cancelDialogDismiss: "Batal",
+    nextPaymentButton: "Lanjut ke Pembayaran"
   },
   en: {
     bookingDetails: "Booking Details",
     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",
@@ -13919,7 +13926,8 @@ var DEFAULT_LABELS27 = {
     cancelDialogTitle: "Discard changes?",
     cancelDialogBody: "Changes have not been saved and will be lost if you continue.",
     cancelDialogConfirm: "Discard Changes",
-    cancelDialogDismiss: "Cancel"
+    cancelDialogDismiss: "Cancel",
+    nextPaymentButton: "Proceed to Payment"
   }
 };
 var useStyles28 = reactComponents.makeStyles({
@@ -13994,6 +14002,12 @@ var useStyles28 = reactComponents.makeStyles({
     gap: "1rem"
   },
   ticketInfo: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: "0.5em"
+  },
+  ticketinfoCard: {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
@@ -14089,6 +14103,7 @@ var CardBookingTicket = ({
   reservationStep,
   paymentStep,
   onPriceDetailClick,
+  onTermsAndConditionsClick,
   onCancel,
   onNext,
   onPrevious,
@@ -14097,6 +14112,11 @@ var CardBookingTicket = ({
   const styles = useStyles28();
   const mergedLabels = { ...DEFAULT_LABELS27[language], ...labels };
   const [cancelDialogOpen, setCancelDialogOpen] = React.useState(false);
+  const [isTermsAccepted, setIsTermsAccepted] = React.useState(false);
+  const handleTermsAndConditionsClick = () => {
+    onTermsAndConditionsClick?.();
+  };
+  const isNextButtonDisabled = disableNextButton || reservationStep === "review" && !isTermsAccepted;
   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 }),
@@ -14150,26 +14170,32 @@ var CardBookingTicket = ({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.routeTitle }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketInfo, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketTime, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { children: departureDay }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Stronger, { children: departureTime }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { children: departureLocation })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketDuration, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:vehicle-ship-24-regular" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption2, { children: [
-            mergedLabels.estimationPrefix,
-            " ",
-            formatDuration(duration)
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketTime, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { children: arrivalDay }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Stronger, { children: arrivalTime }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { children: arrivalLocation })
-        ] })
-      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: reservationStep === "review" ? styles.ticketinfoCard : styles.ticketInfo,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketTime, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { children: departureDay }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Stronger, { children: departureTime }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { children: departureLocation })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketDuration, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:vehicle-ship-24-regular" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption2, { children: [
+                mergedLabels.estimationPrefix,
+                " ",
+                formatDuration(duration)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketTime, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { children: arrivalDay }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Stronger, { children: arrivalTime }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { children: arrivalLocation })
+            ] })
+          ]
+        }
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.circularLeft }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.circularRight })
     ] }),
@@ -14205,15 +14231,28 @@ var CardBookingTicket = ({
       reservationStep === "review" && /* @__PURE__ */ jsxRuntime.jsx(
         reactComponents.Checkbox,
         {
+          checked: isTermsAccepted,
+          onChange: (_, data) => setIsTermsAccepted(!!data.checked),
           label: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { children: [
-            "Saya menyetujui",
+            mergedLabels.agreementPrefix,
             " ",
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: brandColors[80] }, children: [
-              " ",
-              "Syarat & Ketentuan"
-            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleTermsAndConditionsClick,
+                style: {
+                  color: brandColors[80],
+                  background: "transparent",
+                  border: "none",
+                  padding: 0,
+                  cursor: "pointer"
+                },
+                children: mergedLabels.termsAndConditions
+              }
+            ),
             " ",
-            "ferizy"
+            mergedLabels.agreementSuffix
           ] })
         }
       ),
@@ -14222,17 +14261,17 @@ var CardBookingTicket = ({
           reactComponents.Button,
           {
             appearance: "primary",
-            disabled: disableNextButton,
+            disabled: isNextButtonDisabled,
             onClick: onNext,
             shape: "circular",
             size: "large",
             style: { width: "100%" },
             icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:chevron-right-20-regular" }),
             iconPosition: "after",
-            children: mergedLabels.nextButton
+            children: reservationStep === "review" ? mergedLabels.nextPaymentButton : mergedLabels.nextButton
           }
         ),
-        ["addon", "meals", "review", "payment", "eticket"].includes(
+        ["addon", "meals", "review", "eticket"].includes(
           reservationStep
         ) && !["pay"].includes(paymentStep) && /* @__PURE__ */ jsxRuntime.jsx(
           reactComponents.Button,
@@ -14247,31 +14286,18 @@ var CardBookingTicket = ({
             children: mergedLabels.previousButton
           }
         ),
-        paymentStep === "pay" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactComponents.Button,
-            {
-              appearance: "primary",
-              disabled: disableNextButton,
-              onClick: onNext,
-              shape: "circular",
-              size: "large",
-              style: { width: "100%" },
-              children: mergedLabels.viewBookingButton
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactComponents.Button,
-            {
-              appearance: "secondary",
-              shape: "circular",
-              size: "large",
-              className: styles.secondaryButton,
-              onClick: onPrevious,
-              children: mergedLabels.changePaymentButton
-            }
-          )
-        ] }),
+        paymentStep === "pay" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Button,
+          {
+            appearance: "primary",
+            disabled: disableNextButton,
+            onClick: onNext,
+            shape: "circular",
+            size: "large",
+            style: { width: "100%" },
+            children: mergedLabels.viewBookingButton
+          }
+        ) }),
         reservationStep === "manifest" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             reactComponents.Button,