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

package/dist/index.mjs

@@ -13883,6 +13883,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",
@@ -13893,13 +13896,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",
@@ -13910,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({
@@ -13985,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",
@@ -14080,6 +14094,7 @@ var CardBookingTicket = ({
   reservationStep,
   paymentStep,
   onPriceDetailClick,
+  onTermsAndConditionsClick,
   onCancel,
   onNext,
   onPrevious,
@@ -14088,6 +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 }),
@@ -14141,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 })
     ] }),
@@ -14196,15 +14222,28 @@ var CardBookingTicket = ({
       reservationStep === "review" && /* @__PURE__ */ jsx(
         Checkbox,
         {
+          checked: isTermsAccepted,
+          onChange: (_, data) => setIsTermsAccepted(!!data.checked),
           label: /* @__PURE__ */ jsxs(Body1, { children: [
-            "Saya menyetujui",
+            mergedLabels.agreementPrefix,
             " ",
-            /* @__PURE__ */ jsxs("span", { style: { color: brandColors[80] }, children: [
-              " ",
-              "Syarat & Ketentuan"
-            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleTermsAndConditionsClick,
+                style: {
+                  color: brandColors[80],
+                  background: "transparent",
+                  border: "none",
+                  padding: 0,
+                  cursor: "pointer"
+                },
+                children: mergedLabels.termsAndConditions
+              }
+            ),
             " ",
-            "ferizy"
+            mergedLabels.agreementSuffix
           ] })
         }
       ),
@@ -14213,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,
@@ -14238,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,