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

package/dist/index.mjs

@@ -13896,7 +13896,8 @@ 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",
@@ -13916,7 +13917,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 = makeStyles({
@@ -13991,6 +13993,12 @@ var useStyles28 = makeStyles({
     gap: "1rem"
   },
   ticketInfo: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: "0.5em"
+  },
+  ticketinfoCard: {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
@@ -14095,9 +14103,11 @@ var CardBookingTicket = ({
   const styles = useStyles28();
   const mergedLabels = { ...DEFAULT_LABELS27[language], ...labels };
   const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
+  const [isTermsAccepted, setIsTermsAccepted] = useState(false);
   const handleTermsAndConditionsClick = () => {
     onTermsAndConditionsClick?.();
   };
+  const isNextButtonDisabled = disableNextButton || reservationStep === "review" && !isTermsAccepted;
   return /* @__PURE__ */ jsx("div", { className: `${styles.container} ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: styles.bookingDetail, children: [
     /* @__PURE__ */ jsxs(Card, { className: styles.bookingDetailTop, children: [
       /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.bookingDetails }),
@@ -14151,26 +14161,32 @@ var CardBookingTicket = ({
         }
       ),
       /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.routeTitle }),
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: styles.ticketInfo, children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.ticketTime, children: [
-          /* @__PURE__ */ jsx(Caption2, { children: departureDay }),
-          /* @__PURE__ */ jsx(Body1Stronger, { children: departureTime }),
-          /* @__PURE__ */ jsx(Caption2, { children: departureLocation })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: styles.ticketDuration, children: [
-          /* @__PURE__ */ jsx(Icon, { icon: "fluent:vehicle-ship-24-regular" }),
-          /* @__PURE__ */ jsxs(Caption2, { children: [
-            mergedLabels.estimationPrefix,
-            " ",
-            formatDuration(duration)
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: styles.ticketTime, children: [
-          /* @__PURE__ */ jsx(Caption2, { children: arrivalDay }),
-          /* @__PURE__ */ jsx(Body1Stronger, { children: arrivalTime }),
-          /* @__PURE__ */ jsx(Caption2, { children: arrivalLocation })
-        ] })
-      ] }) }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: reservationStep === "review" ? styles.ticketinfoCard : styles.ticketInfo,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.ticketTime, children: [
+              /* @__PURE__ */ jsx(Caption2, { children: departureDay }),
+              /* @__PURE__ */ jsx(Body1Stronger, { children: departureTime }),
+              /* @__PURE__ */ jsx(Caption2, { children: departureLocation })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.ticketDuration, children: [
+              /* @__PURE__ */ jsx(Icon, { icon: "fluent:vehicle-ship-24-regular" }),
+              /* @__PURE__ */ jsxs(Caption2, { children: [
+                mergedLabels.estimationPrefix,
+                " ",
+                formatDuration(duration)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.ticketTime, children: [
+              /* @__PURE__ */ jsx(Caption2, { children: arrivalDay }),
+              /* @__PURE__ */ jsx(Body1Stronger, { children: arrivalTime }),
+              /* @__PURE__ */ jsx(Caption2, { children: arrivalLocation })
+            ] })
+          ]
+        }
+      ) }),
       /* @__PURE__ */ jsx("div", { className: styles.circularLeft }),
       /* @__PURE__ */ jsx("div", { className: styles.circularRight })
     ] }),
@@ -14206,6 +14222,8 @@ var CardBookingTicket = ({
       reservationStep === "review" && /* @__PURE__ */ jsx(
         Checkbox,
         {
+          checked: isTermsAccepted,
+          onChange: (_, data) => setIsTermsAccepted(!!data.checked),
           label: /* @__PURE__ */ jsxs(Body1, { children: [
             mergedLabels.agreementPrefix,
             " ",
@@ -14234,17 +14252,17 @@ var CardBookingTicket = ({
           Button,
           {
             appearance: "primary",
-            disabled: disableNextButton,
+            disabled: isNextButtonDisabled,
             onClick: onNext,
             shape: "circular",
             size: "large",
             style: { width: "100%" },
             icon: /* @__PURE__ */ jsx(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__ */ jsx(
           Button,
@@ -14259,31 +14277,18 @@ var CardBookingTicket = ({
             children: mergedLabels.previousButton
           }
         ),
-        paymentStep === "pay" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              appearance: "primary",
-              disabled: disableNextButton,
-              onClick: onNext,
-              shape: "circular",
-              size: "large",
-              style: { width: "100%" },
-              children: mergedLabels.viewBookingButton
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              appearance: "secondary",
-              shape: "circular",
-              size: "large",
-              className: styles.secondaryButton,
-              onClick: onPrevious,
-              children: mergedLabels.changePaymentButton
-            }
-          )
-        ] }),
+        paymentStep === "pay" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "primary",
+            disabled: disableNextButton,
+            onClick: onNext,
+            shape: "circular",
+            size: "large",
+            style: { width: "100%" },
+            children: mergedLabels.viewBookingButton
+          }
+        ) }),
         reservationStep === "manifest" && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             Button,