@asdp/ferryui 0.1.22-dev.9700 → 0.1.22-dev.9705

package/dist/index.d.mts

@@ -147,6 +147,34 @@ declare const PRESET_CONTENT: {
             readonly imageAlt: "Transaction Limit Illustration";
         };
     };
+    readonly UNAUTHENTICATED: {
+        readonly id: {
+            readonly title: "Masuk untuk melanjutkan pemesanan";
+            readonly message: "Untuk memesan tiket dan mengisi manifest penumpang, Anda perlu masuk terlebih dahulu. Pilihan jadwal Anda akan tetap tersimpan.";
+            readonly imageSrc: "/assets/images/illustrations/auth.svg";
+            readonly imageAlt: "Unauthenticated Illustration";
+        };
+        readonly en: {
+            readonly title: "Sign in to continue booking";
+            readonly message: "To book tickets and fill in the passenger manifest, you need to sign in first. Your schedule selection will be saved.";
+            readonly imageSrc: "/assets/images/illustrations/auth.svg";
+            readonly imageAlt: "Unauthenticated Illustration";
+        };
+    };
+    readonly PROFILE_NOT_COMPLETE: {
+        readonly id: {
+            readonly title: "Profil Belum Lengkap";
+            readonly message: "Untuk melanjutkan pemesanan tiket, kami memerlukan data profil yang lengkap sesuai ketentuan ASDP. Lengkapi profil Anda terlebih dahulu agar dapat melanjutkan ke pengisian manifest.";
+            readonly imageSrc: "/assets/images/illustrations/profile.svg";
+            readonly imageAlt: "Profile Not Complete Illustration";
+        };
+        readonly en: {
+            readonly title: "Profile Not Complete";
+            readonly message: "To continue booking tickets, we need complete profile data according to ASDP provisions. Please complete your profile first to proceed to manifest filling.";
+            readonly imageSrc: "/assets/images/illustrations/profile.svg";
+            readonly imageAlt: "Profile Not Complete Illustration";
+        };
+    };
 };
 
 /**
@@ -166,6 +194,8 @@ declare const MODAL_PRESETS: {
     readonly SESSION_EXPIRED: Partial<ModalIllustrationProps>;
     readonly PURCHASE_PERIOD_EXPIRED: Partial<ModalIllustrationProps>;
     readonly TRANSACTION_LIMIT: Partial<ModalIllustrationProps>;
+    readonly UNAUTHENTICATED: Partial<ModalIllustrationProps>;
+    readonly PROFILE_NOT_COMPLETE: Partial<ModalIllustrationProps>;
 };
 
 interface CarouselWithCustomNavLabels {
@@ -403,6 +433,7 @@ interface CardTicketLabels {
     timezoneLabel: string;
     currencySymbol: string;
     logoAlt: string;
+    verifyingTicketButton: string;
 }
 interface CardTicketProps {
     /**
@@ -439,6 +470,7 @@ interface CardTicketProps {
      */
     onSelectTicket?: () => void;
     isLoading?: boolean;
+    isVerifyingTicket?: boolean;
 }
 interface DepartureItem {
     departureDay: string;
@@ -1900,8 +1932,10 @@ declare const DEFAULT_VEHICLE_ICONS: {
 };
 
 interface SortOption {
-    value: string;
     label: string;
+    value: string;
+    sortBy: string;
+    sortDir: string;
 }
 interface FilterCount {
     typeService?: number;
@@ -1936,9 +1970,9 @@ interface SortMenuProps {
      */
     value: string;
     /**
-     * Callback when sort value changes
+     * Callback when sort value changes — receives full SortOption object
      */
-    onChange: (value: string) => void;
+    onChange: (option: SortOption) => void;
     /**
      * Total active filter categories
      * @default 0
@@ -1982,10 +2016,7 @@ declare const SortMenu: React$1.FC<SortMenuProps>;
 /**
  * @deprecated Use getSortOptions and find the label from there
  */
-declare const DEFAULT_SORT_OPTIONS: {
-    value: string;
-    label: string;
-}[];
+declare const DEFAULT_SORT_OPTIONS: SortOption[];
 /**
  * @deprecated Use labels directly
  */
@@ -2006,13 +2037,19 @@ interface ModalFilterTicketProps {
      */
     onOpenChange: (open: boolean) => void;
     /**
-     * Selected service types
+     * Selected service types as objects with id and label
      */
-    selectedServiceTypes: string[];
+    selectedServiceTypes: Array<{
+        id: number;
+        label: string;
+    }>;
     /**
      * Callback when service types change
      */
-    onServiceTypesChange: (serviceTypes: string[]) => void;
+    onServiceTypesChange: (serviceTypes: Array<{
+        id: number;
+        label: string;
+    }>) => void;
     /**
      * Selected departure time slots
      */
@@ -2061,7 +2098,7 @@ interface ModalFilterTicketProps {
      * Service types list (from API data)
      */
     serviceTypes?: Array<{
-        value: string;
+        value: number;
         label: string;
     }>;
     /**

package/dist/index.d.ts

@@ -147,6 +147,34 @@ declare const PRESET_CONTENT: {
             readonly imageAlt: "Transaction Limit Illustration";
         };
     };
+    readonly UNAUTHENTICATED: {
+        readonly id: {
+            readonly title: "Masuk untuk melanjutkan pemesanan";
+            readonly message: "Untuk memesan tiket dan mengisi manifest penumpang, Anda perlu masuk terlebih dahulu. Pilihan jadwal Anda akan tetap tersimpan.";
+            readonly imageSrc: "/assets/images/illustrations/auth.svg";
+            readonly imageAlt: "Unauthenticated Illustration";
+        };
+        readonly en: {
+            readonly title: "Sign in to continue booking";
+            readonly message: "To book tickets and fill in the passenger manifest, you need to sign in first. Your schedule selection will be saved.";
+            readonly imageSrc: "/assets/images/illustrations/auth.svg";
+            readonly imageAlt: "Unauthenticated Illustration";
+        };
+    };
+    readonly PROFILE_NOT_COMPLETE: {
+        readonly id: {
+            readonly title: "Profil Belum Lengkap";
+            readonly message: "Untuk melanjutkan pemesanan tiket, kami memerlukan data profil yang lengkap sesuai ketentuan ASDP. Lengkapi profil Anda terlebih dahulu agar dapat melanjutkan ke pengisian manifest.";
+            readonly imageSrc: "/assets/images/illustrations/profile.svg";
+            readonly imageAlt: "Profile Not Complete Illustration";
+        };
+        readonly en: {
+            readonly title: "Profile Not Complete";
+            readonly message: "To continue booking tickets, we need complete profile data according to ASDP provisions. Please complete your profile first to proceed to manifest filling.";
+            readonly imageSrc: "/assets/images/illustrations/profile.svg";
+            readonly imageAlt: "Profile Not Complete Illustration";
+        };
+    };
 };
 
 /**
@@ -166,6 +194,8 @@ declare const MODAL_PRESETS: {
     readonly SESSION_EXPIRED: Partial<ModalIllustrationProps>;
     readonly PURCHASE_PERIOD_EXPIRED: Partial<ModalIllustrationProps>;
     readonly TRANSACTION_LIMIT: Partial<ModalIllustrationProps>;
+    readonly UNAUTHENTICATED: Partial<ModalIllustrationProps>;
+    readonly PROFILE_NOT_COMPLETE: Partial<ModalIllustrationProps>;
 };
 
 interface CarouselWithCustomNavLabels {
@@ -403,6 +433,7 @@ interface CardTicketLabels {
     timezoneLabel: string;
     currencySymbol: string;
     logoAlt: string;
+    verifyingTicketButton: string;
 }
 interface CardTicketProps {
     /**
@@ -439,6 +470,7 @@ interface CardTicketProps {
      */
     onSelectTicket?: () => void;
     isLoading?: boolean;
+    isVerifyingTicket?: boolean;
 }
 interface DepartureItem {
     departureDay: string;
@@ -1900,8 +1932,10 @@ declare const DEFAULT_VEHICLE_ICONS: {
 };
 
 interface SortOption {
-    value: string;
     label: string;
+    value: string;
+    sortBy: string;
+    sortDir: string;
 }
 interface FilterCount {
     typeService?: number;
@@ -1936,9 +1970,9 @@ interface SortMenuProps {
      */
     value: string;
     /**
-     * Callback when sort value changes
+     * Callback when sort value changes — receives full SortOption object
      */
-    onChange: (value: string) => void;
+    onChange: (option: SortOption) => void;
     /**
      * Total active filter categories
      * @default 0
@@ -1982,10 +2016,7 @@ declare const SortMenu: React$1.FC<SortMenuProps>;
 /**
  * @deprecated Use getSortOptions and find the label from there
  */
-declare const DEFAULT_SORT_OPTIONS: {
-    value: string;
-    label: string;
-}[];
+declare const DEFAULT_SORT_OPTIONS: SortOption[];
 /**
  * @deprecated Use labels directly
  */
@@ -2006,13 +2037,19 @@ interface ModalFilterTicketProps {
      */
     onOpenChange: (open: boolean) => void;
     /**
-     * Selected service types
+     * Selected service types as objects with id and label
      */
-    selectedServiceTypes: string[];
+    selectedServiceTypes: Array<{
+        id: number;
+        label: string;
+    }>;
     /**
      * Callback when service types change
      */
-    onServiceTypesChange: (serviceTypes: string[]) => void;
+    onServiceTypesChange: (serviceTypes: Array<{
+        id: number;
+        label: string;
+    }>) => void;
     /**
      * Selected departure time slots
      */
@@ -2061,7 +2098,7 @@ interface ModalFilterTicketProps {
      * Service types list (from API data)
      */
     serviceTypes?: Array<{
-        value: string;
+        value: number;
         label: string;
     }>;
     /**

package/dist/index.js

@@ -89,6 +89,34 @@ var PRESET_CONTENT = {
       imageSrc: "/assets/images/illustrations/mobile-pay.svg",
       imageAlt: "Transaction Limit Illustration"
     }
+  },
+  UNAUTHENTICATED: {
+    id: {
+      title: "Masuk untuk melanjutkan pemesanan",
+      message: "Untuk memesan tiket dan mengisi manifest penumpang, Anda perlu masuk terlebih dahulu. Pilihan jadwal Anda akan tetap tersimpan.",
+      imageSrc: "/assets/images/illustrations/auth.svg",
+      imageAlt: "Unauthenticated Illustration"
+    },
+    en: {
+      title: "Sign in to continue booking",
+      message: "To book tickets and fill in the passenger manifest, you need to sign in first. Your schedule selection will be saved.",
+      imageSrc: "/assets/images/illustrations/auth.svg",
+      imageAlt: "Unauthenticated Illustration"
+    }
+  },
+  PROFILE_NOT_COMPLETE: {
+    id: {
+      title: "Profil Belum Lengkap",
+      message: "Untuk melanjutkan pemesanan tiket, kami memerlukan data profil yang lengkap sesuai ketentuan ASDP. Lengkapi profil Anda terlebih dahulu agar dapat melanjutkan ke pengisian manifest.",
+      imageSrc: "/assets/images/illustrations/profile.svg",
+      imageAlt: "Profile Not Complete Illustration"
+    },
+    en: {
+      title: "Profile Not Complete",
+      message: "To continue booking tickets, we need complete profile data according to ASDP provisions. Please complete your profile first to proceed to manifest filling.",
+      imageSrc: "/assets/images/illustrations/profile.svg",
+      imageAlt: "Profile Not Complete Illustration"
+    }
   }
 };
 var useStyles = reactComponents.makeStyles({
@@ -198,7 +226,9 @@ var MODAL_PRESETS = {
   RADIUS: getModalPreset("RADIUS", "id"),
   SESSION_EXPIRED: getModalPreset("SESSION_EXPIRED", "id"),
   PURCHASE_PERIOD_EXPIRED: getModalPreset("PURCHASE_PERIOD_EXPIRED", "id"),
-  TRANSACTION_LIMIT: getModalPreset("TRANSACTION_LIMIT", "id")
+  TRANSACTION_LIMIT: getModalPreset("TRANSACTION_LIMIT", "id"),
+  UNAUTHENTICATED: getModalPreset("UNAUTHENTICATED", "id"),
+  PROFILE_NOT_COMPLETE: getModalPreset("PROFILE_NOT_COMPLETE", "id")
 };
 
 // src/components/CarouselWithCustomNav/CarouselWithCustomNav.constants.ts
@@ -1123,7 +1153,8 @@ var DEFAULT_LABELS5 = {
     selectTicketButton: "Pilih Tiket",
     timezoneLabel: "WIB",
     currencySymbol: "IDR",
-    logoAlt: "Logo ASDP"
+    logoAlt: "Logo ASDP",
+    verifyingTicketButton: "Memeriksa Tiket"
   },
   en: {
     availableSeatsLabel: "Available",
@@ -1135,7 +1166,8 @@ var DEFAULT_LABELS5 = {
     selectTicketButton: "Select Ticket",
     timezoneLabel: "WIB",
     currencySymbol: "IDR",
-    logoAlt: "ASDP Logo"
+    logoAlt: "ASDP Logo",
+    verifyingTicketButton: "Verifying Ticket"
   }
 };
 
@@ -1351,7 +1383,8 @@ var CardTicket = ({
   onPriceDetailClick,
   onPolicyClick,
   onSelectTicket,
-  isLoading = false
+  isLoading = false,
+  isVerifyingTicket = false
 }) => {
   const styles = useStyles5();
   const { width } = useWindowSize();
@@ -1701,8 +1734,13 @@ var CardTicket = ({
                   style: { backgroundColor: brandColors["60"] },
                   size: "medium",
                   shape: "circular",
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
-                  children: buttonText || mergedLabels.selectTicketButton
+                  icon: isVerifyingTicket ? null : /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
+                  disabled: isVerifyingTicket,
+                  children: isVerifyingTicket ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Spinner, { size: "extra-tiny", style: { marginRight: "5px" } }),
+                    " ",
+                    mergedLabels.verifyingTicketButton
+                  ] }) : buttonText || mergedLabels.selectTicketButton
                 }
               )
             ] }),
@@ -8750,18 +8788,18 @@ var DEFAULT_LABELS16 = {
   }
 };
 var getSortOptions = (labels) => [
-  { value: "rekomendasi", label: labels.recommendation },
-  { value: "harga-tertinggi", label: labels.highestPrice },
-  { value: "harga-terendah", label: labels.lowestPrice },
-  { value: "keberangkatan-paling-awal", label: labels.earliestDeparture },
-  { value: "keberangkatan-paling-akhir", label: labels.latestDeparture }
+  { value: "recommended", sortBy: "recommendation", sortDir: "ASC", label: labels.recommendation },
+  { value: "price-desc", sortBy: "price", sortDir: "DESC", label: labels.highestPrice },
+  { value: "price-asc", sortBy: "price", sortDir: "ASC", label: labels.lowestPrice },
+  { value: "departure-asc", sortBy: "departure", sortDir: "ASC", label: labels.earliestDeparture },
+  { value: "departure-desc", sortBy: "departure", sortDir: "DESC", label: labels.latestDeparture }
 ];
 var DEFAULT_SORT_OPTIONS = [
-  { value: "rekomendasi", label: "Rekomendasi" },
-  { value: "harga-tertinggi", label: "Harga Tertinggi" },
-  { value: "harga-terendah", label: "Harga Terendah" },
-  { value: "keberangkatan-paling-awal", label: "Keberangkatan Paling Awal" },
-  { value: "keberangkatan-paling-akhir", label: "Keberangkatan Paling Akhir" }
+  { value: "recommended", sortBy: "recommendation", sortDir: "ASC", label: "Rekomendasi" },
+  { value: "price-desc", sortBy: "price", sortDir: "DESC", label: "Harga Tertinggi" },
+  { value: "price-asc", sortBy: "price", sortDir: "ASC", label: "Harga Terendah" },
+  { value: "departure-asc", sortBy: "departure", sortDir: "ASC", label: "Keberangkatan Paling Awal" },
+  { value: "departure-desc", sortBy: "departure", sortDir: "DESC", label: "Keberangkatan Paling Akhir" }
 ];
 var getSortLabel = (value) => {
   const option = DEFAULT_SORT_OPTIONS.find((opt) => opt.value === value);
@@ -8835,8 +8873,9 @@ var SortMenu = ({
     () => sortOptions.find((opt) => opt.value === value)?.label || labels.recommendation,
     [sortOptions, value, labels.recommendation]
   );
+  const defaultOption = sortOptions.find((opt) => opt.value === "recommended") || sortOptions[0];
   const handleReset = () => {
-    onChange("rekomendasi");
+    onChange(defaultOption);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
     onFilterClick && /* @__PURE__ */ jsxRuntime.jsx(
@@ -8868,7 +8907,10 @@ var SortMenu = ({
         reactComponents.RadioGroup,
         {
           value,
-          onChange: (_, data) => onChange(data.value),
+          onChange: (_, data) => {
+            const selected = sortOptions.find((opt) => opt.value === data.value);
+            if (selected) onChange(selected);
+          },
           children: sortOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
             reactComponents.Radio,
             {
@@ -9117,11 +9159,12 @@ var ModalFilterTicket = ({
       };
     }
   }, [open]);
-  const handleServiceTypeToggle = (value) => {
-    if (selectedServiceTypes.includes(value)) {
-      onServiceTypesChange(selectedServiceTypes.filter((s) => s !== value));
+  const handleServiceTypeToggle = (service) => {
+    const exists = selectedServiceTypes.some((s) => s.id === service.value);
+    if (exists) {
+      onServiceTypesChange(selectedServiceTypes.filter((s) => s.id !== service.value));
     } else {
-      onServiceTypesChange([...selectedServiceTypes, value]);
+      onServiceTypesChange([...selectedServiceTypes, { id: service.value, label: service.label }]);
     }
   };
   const handleDepartureTimeChange = (value, checked) => {
@@ -9297,8 +9340,8 @@ var ModalFilterTicket = ({
       isLoading ? renderServiceTypesSkeleton() : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.serviceTypeLabel }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.buttonGrid, children: serviceTypes.map((service) => {
-          const isSelected = selectedServiceTypes.includes(
-            service.value
+          const isSelected = selectedServiceTypes.some(
+            (s) => s.id === service.value
           );
           return /* @__PURE__ */ jsxRuntime.jsx(
             reactComponents.Button,
@@ -9306,7 +9349,7 @@ var ModalFilterTicket = ({
               appearance: isSelected ? "primary" : "outline",
               className: isSelected ? "" : styles.outlinePrimary,
               size: "large",
-              onClick: () => handleServiceTypeToggle(service.value),
+              onClick: () => handleServiceTypeToggle(service),
               style: { width: "100%" },
               children: service.label
             },
@@ -13356,23 +13399,23 @@ var useStyles28 = reactComponents.makeStyles({
   },
   circularLeft: {
     position: "absolute",
-    width: "80px",
-    height: "80px",
+    width: "75px",
+    height: "75px",
     borderRadius: "50%",
     backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover,
     left: "-37px",
-    bottom: "-30px",
+    bottom: "-42px",
     zIndex: 2,
     boxShadow: "inset -3px 0px 1px rgba(0, 0, 0, 0.1)"
   },
   circularRight: {
     position: "absolute",
-    width: "80px",
-    height: "80px",
+    width: "75px",
+    height: "75px",
     borderRadius: "50%",
     backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover,
     right: "-37px",
-    bottom: "-30px",
+    bottom: "-42px",
     zIndex: 2,
     boxShadow: "inset 3px 0px 1px rgba(0, 0, 0, 0.1)"
   },