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

package/dist/index.d.mts

@@ -3159,6 +3159,7 @@ interface CardBookingTicketLabels {
     cancelDialogBody: string;
     cancelDialogConfirm: string;
     cancelDialogDismiss: string;
+    nextPaymentButton: string;
 }
 interface CardBookingTicketProps {
     /**

package/dist/index.d.ts

@@ -3159,6 +3159,7 @@ interface CardBookingTicketLabels {
     cancelDialogBody: string;
     cancelDialogConfirm: string;
     cancelDialogDismiss: string;
+    nextPaymentButton: string;
 }
 interface CardBookingTicketProps {
     /**

package/dist/index.js

@@ -13905,7 +13905,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",
@@ -13925,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({
@@ -14000,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",
@@ -14104,9 +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 }),
@@ -14160,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 })
     ] }),
@@ -14215,6 +14231,8 @@ var CardBookingTicket = ({
       reservationStep === "review" && /* @__PURE__ */ jsxRuntime.jsx(
         reactComponents.Checkbox,
         {
+          checked: isTermsAccepted,
+          onChange: (_, data) => setIsTermsAccepted(!!data.checked),
           label: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { children: [
             mergedLabels.agreementPrefix,
             " ",
@@ -14243,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,
@@ -14268,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,