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

package/dist/index.mjs

@@ -283,6 +283,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 = {
@@ -13881,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",
@@ -13898,6 +13903,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",
@@ -13986,7 +13994,14 @@ var useStyles28 = makeStyles({
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    gap: "0.5em"
+    gap: "0.5em",
+    backgroundColor: lightModeColors.Neutral_Background_2_Hover,
+    ...shorthands.padding(
+      tokens.spacingHorizontalM,
+      tokens.spacingHorizontalMNudge
+    ),
+    border: `${tokens.strokeWidthThin} solid ${lightModeColors.Neutral_Background_3_Pressed}`,
+    borderRadius: tokens.borderRadiusXLarge
   },
   ticketTime: {
     display: "flex",
@@ -14071,6 +14086,7 @@ var CardBookingTicket = ({
   reservationStep,
   paymentStep,
   onPriceDetailClick,
+  onTermsAndConditionsClick,
   onCancel,
   onNext,
   onPrevious,
@@ -14079,6 +14095,9 @@ var CardBookingTicket = ({
   const styles = useStyles28();
   const mergedLabels = { ...DEFAULT_LABELS27[language], ...labels };
   const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
+  const handleTermsAndConditionsClick = () => {
+    onTermsAndConditionsClick?.();
+  };
   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 }),
@@ -14126,7 +14145,7 @@ var CardBookingTicket = ({
         {
           style: {
             height: "1px",
-            backgroundColor: tokens.colorNeutralStroke2,
+            backgroundColor: "tokens.colorNeutralStroke2",
             margin: "1rem 0"
           }
         }
@@ -14158,22 +14177,58 @@ var CardBookingTicket = ({
     /* @__PURE__ */ jsxs(Card, { className: styles.bookingDetailBottom, children: [
       /* @__PURE__ */ jsxs("div", { className: styles.totalPrice, children: [
         /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.totalPriceLabel }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: tokens.spacingHorizontalL, alignItems: "center" }, children: [
-          /* @__PURE__ */ jsxs(Title3, { className: styles.priceText, children: [
-            mergedLabels.currencySymbol,
-            " ",
-            totalPrice
-          ] }),
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              icon: "fluent:chevron-down-24-filled",
-              onClick: onPriceDetailClick,
-              style: { cursor: "pointer" }
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: tokens.spacingHorizontalL,
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Title3, { className: styles.priceText, children: [
+                mergedLabels.currencySymbol,
+                " ",
+                totalPrice
+              ] }),
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: "fluent:chevron-down-24-filled",
+                  onClick: onPriceDetailClick,
+                  style: { cursor: "pointer" }
+                }
+              )
+            ]
+          }
+        )
       ] }),
+      reservationStep === "review" && /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          label: /* @__PURE__ */ jsxs(Body1, { children: [
+            mergedLabels.agreementPrefix,
+            " ",
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleTermsAndConditionsClick,
+                style: {
+                  color: brandColors[80],
+                  background: "transparent",
+                  border: "none",
+                  padding: 0,
+                  cursor: "pointer"
+                },
+                children: mergedLabels.termsAndConditions
+              }
+            ),
+            " ",
+            mergedLabels.agreementSuffix
+          ] })
+        }
+      ),
       /* @__PURE__ */ jsxs("div", { className: styles.gapButton, children: [
         !(paymentStep === "pay") && /* @__PURE__ */ jsx(
           Button,
@@ -15466,7 +15521,8 @@ var useStyles34 = makeStyles({
     boxShadow: "none",
     border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
     borderRadius: tokens.borderRadiusXLarge,
-    padding: `${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXXL}`
+    padding: `${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXXL}`,
+    zIndex: 10
   },
   titleRow: {
     display: "flex",
@@ -15553,9 +15609,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__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Card, { className: styles.passengerCard, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.passengerRow, children: [
         /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs("div", { className: styles.passengerInfo, children: [
-          /* @__PURE__ */ jsx(Subtitle2, { className: styles.passengerName, children: passenger.name }),
+          /* @__PURE__ */ jsxs(Subtitle2, { className: styles.passengerName, children: [
+            passengerTitle,
+            " ",
+            passenger.name
+          ] }),
           /* @__PURE__ */ jsx(Body1, { className: styles.passengerMeta, children: passengerMeta })
         ] }) }),
         /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsxs(