@asdp/ferryui 0.1.22-dev.10194 → 0.1.22-dev.10210

package/dist/index.mjs

@@ -1144,6 +1144,7 @@ function useWindowSize() {
 var DEFAULT_LABELS5 = {
   id: {
     availableSeatsLabel: "Tersedia",
+    soldOutLabel: "Habis",
     estimationPrefix: "Estimasi",
     priceDetailsButton: "Rincian Harga",
     policyButton: "Kebijakan",
@@ -1157,6 +1158,7 @@ var DEFAULT_LABELS5 = {
   },
   en: {
     availableSeatsLabel: "Available",
+    soldOutLabel: "Sold Out",
     estimationPrefix: "Estimation",
     priceDetailsButton: "Price Details",
     policyButton: "Policy",
@@ -1449,7 +1451,7 @@ var CardTicket = ({
                       {
                         size: "large",
                         appearance: "filled",
-                        style: { backgroundColor: departureItem?.provider?.serviceColor, padding: "0.5rem" },
+                        style: { backgroundColor: departureItem?.availableTicket <= 0 ? tokens.colorNeutralForeground3 : departureItem?.provider?.serviceColor, padding: "0.5rem" },
                         iconPosition: "before",
                         shape: "rounded",
                         icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:info-24-regular" }),
@@ -1482,7 +1484,8 @@ var CardTicket = ({
                     className: styles.asdpLogo,
                     alt: mergedLabels.logoAlt,
                     height: 56,
-                    width: 82
+                    width: 82,
+                    style: departureItem?.availableTicket <= 0 ? { filter: "grayscale(100%)", opacity: 0.7 } : {}
                   }
                 )
               }
@@ -1502,23 +1505,19 @@ var CardTicket = ({
                   justifyContent: "center",
                   alignItems: "center"
                 },
-                children: /* @__PURE__ */ jsxs(
+                children: /* @__PURE__ */ jsx(
                   Badge,
                   {
                     size: "large",
-                    style: {
+                    style: departureItem?.availableTicket <= 0 ? void 0 : {
                       color: departureItem?.availableTicket > 50 ? sharedColors.Shared_Green_Primary : sharedColors.Shared_Red_Primary
                     },
-                    appearance: "tint",
+                    appearance: departureItem?.availableTicket <= 0 ? "outline" : "tint",
                     color: departureItem?.availableTicket > 50 ? "success" : "danger",
                     iconPosition: "after",
                     shape: "rounded",
                     icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:ticket-diagonal-24-regular" }),
-                    children: [
-                      mergedLabels.availableSeatsLabel,
-                      " ",
-                      departureItem?.availableTicket
-                    ]
+                    children: departureItem?.availableTicket <= 0 ? mergedLabels.soldOutLabel : `${mergedLabels.availableSeatsLabel} ${departureItem?.availableTicket}`
                   }
                 )
               }
@@ -1591,23 +1590,19 @@ var CardTicket = ({
             /* @__PURE__ */ jsx(SkeletonItem, { style: { flex: 1, height: "32px", borderRadius: "16px" } })
           ] }) })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsx(
             Badge,
             {
               size: "extra-large",
-              style: {
+              style: departureItem?.availableTicket <= 0 ? void 0 : {
                 color: departureItem?.availableTicket > 50 ? sharedColors.Shared_Green_Primary : sharedColors.Shared_Red_Primary
               },
-              appearance: "tint",
+              appearance: departureItem?.availableTicket <= 0 ? "outline" : "tint",
               color: departureItem?.availableTicket > 50 ? "success" : "danger",
               iconPosition: "after",
               shape: "rounded",
               icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:ticket-diagonal-24-regular" }),
-              children: [
-                mergedLabels.availableSeatsLabel,
-                " ",
-                departureItem?.availableTicket
-              ]
+              children: departureItem?.availableTicket <= 0 ? mergedLabels.soldOutLabel : `${mergedLabels.availableSeatsLabel} ${departureItem?.availableTicket}`
             }
           ) }),
           /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: styles.ticketInfo, children: [
@@ -1638,8 +1633,8 @@ var CardTicket = ({
                 shape: "circular",
                 style: {
                   flex: 1,
-                  borderColor: tokens.colorBrandBackground,
-                  color: tokens.colorBrandBackground
+                  borderColor: departureItem?.availableTicket <= 0 ? tokens.colorNeutralForeground4 : tokens.colorBrandBackground,
+                  color: departureItem?.availableTicket <= 0 ? tokens.colorNeutralForeground4 : tokens.colorBrandBackground
                 },
                 icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:money-24-regular" }),
                 size: "medium",
@@ -1654,8 +1649,8 @@ var CardTicket = ({
                 shape: "circular",
                 style: {
                   flex: 1,
-                  borderColor: tokens.colorBrandBackground,
-                  color: tokens.colorBrandBackground
+                  borderColor: departureItem?.availableTicket <= 0 ? tokens.colorNeutralForeground4 : tokens.colorBrandBackground,
+                  color: departureItem?.availableTicket <= 0 ? tokens.colorNeutralForeground4 : tokens.colorBrandBackground
                 },
                 icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:document-bullet-list-24-regular" }),
                 size: "medium",
@@ -1678,7 +1673,7 @@ var CardTicket = ({
         xxl: 4.5,
         xxxl: 4.5,
         style: { padding: 0, margin: 0 },
-        children: /* @__PURE__ */ jsxs(Card, { className: styles.ticketRightCard, children: [
+        children: /* @__PURE__ */ jsxs(Card, { className: styles.ticketRightCard, style: departureItem?.availableTicket <= 0 ? { background: "linear-gradient(75deg, #7A7A7A 0%, #4D4D4D 103.3%)" } : {}, children: [
           isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs("div", { className: styles.priceCard, children: [
               /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", flexDirection: "column", gap: "8px", flex: 1 }, children: [
@@ -1722,11 +1717,11 @@ var CardTicket = ({
                 {
                   onClick: onSelectTicket,
                   appearance: "primary",
-                  style: { backgroundColor: brandColors["60"] },
+                  style: isVerifyingTicket || departureItem?.availableTicket <= 0 ? void 0 : { backgroundColor: brandColors["60"] },
                   size: "medium",
                   shape: "circular",
                   icon: isVerifyingTicket ? null : /* @__PURE__ */ jsx(Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
-                  disabled: isVerifyingTicket,
+                  disabled: isVerifyingTicket || departureItem?.availableTicket <= 0,
                   children: isVerifyingTicket ? /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx(Spinner, { size: "extra-tiny", style: { marginRight: "5px" } }),
                     " ",
@@ -11294,7 +11289,9 @@ var ModalPassengerForm = ({
   idTypes,
   ticketClassOptions,
   onScanComplete,
-  isLoading
+  isLoading,
+  minAge,
+  maxAge
 }) => {
   const styles = useStyles24();
   const mergedLabels = { ...DEFAULT_LABELS23[language], ...labels };
@@ -11303,6 +11300,15 @@ var ModalPassengerForm = ({
     ...labels?.errors
   };
   const displayTitle = title || mergedLabels.title;
+  const computeDateBound = (yearsOffset) => {
+    const d = /* @__PURE__ */ new Date();
+    d.setFullYear(d.getFullYear() - yearsOffset);
+    const offset = d.getTimezoneOffset();
+    const adjusted = new Date(d.getTime() - offset * 60 * 1e3);
+    return adjusted.toISOString().split("T")[0];
+  };
+  const birthdateMaxDate = computeDateBound(minAge);
+  const birthdateMinDate = computeDateBound(maxAge);
   const [isModalSelectIdTypeOpen, setIsModalSelectIdTypeOpen] = useState(false);
   const [isModalScanOpen, setIsModalScanOpen] = useState(false);
   const [scannedIdType, setScannedIdType] = useState(null);
@@ -11890,14 +11896,23 @@ var ModalPassengerForm = ({
                   size: "large",
                   required: true,
                   disableFutureDates: true,
+                  min: birthdateMinDate,
+                  max: birthdateMaxDate,
                   validationRules: {
                     required: mergedErrors.requiredDate,
                     validate: (value) => {
-                      const selectedDate = new Date(value);
-                      const today = /* @__PURE__ */ new Date();
-                      today.setHours(0, 0, 0, 0);
-                      if (selectedDate > today) {
-                        return mergedErrors.birthDateFuture;
+                      const { years } = calculateAge(value);
+                      if (years < minAge) {
+                        return mergedErrors.minAge.replace(
+                          /\d+/,
+                          minAge.toString()
+                        );
+                      }
+                      if (years > maxAge) {
+                        return mergedErrors.maxAge.replace(
+                          /\d+/,
+                          maxAge.toString()
+                        );
                       }
                       return true;
                     }