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

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, InfoLabel, Body1, Body1Strong, Caption1, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Label, Text, Subtitle1, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Menu, MenuTrigger, MenuPopover, MenuList, Radio, DialogActions, Caption2Strong, Body2, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, typographyStyles, Switch, Textarea, Link } from '@fluentui/react-components';
+import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, InfoLabel, Body1, Body1Strong, Caption1, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Spinner, Label, Text, Subtitle1, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Menu, MenuTrigger, MenuPopover, MenuList, Radio, DialogActions, Caption2Strong, Body2, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, typographyStyles, Switch, Textarea, Link } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
 import { ArrowDownloadRegular, Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular } from '@fluentui/react-icons';
@@ -80,6 +80,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 = makeStyles({
@@ -189,7 +217,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
@@ -1114,7 +1144,8 @@ var DEFAULT_LABELS5 = {
     selectTicketButton: "Pilih Tiket",
     timezoneLabel: "WIB",
     currencySymbol: "IDR",
-    logoAlt: "Logo ASDP"
+    logoAlt: "Logo ASDP",
+    verifyingTicketButton: "Memeriksa Tiket"
   },
   en: {
     availableSeatsLabel: "Available",
@@ -1126,7 +1157,8 @@ var DEFAULT_LABELS5 = {
     selectTicketButton: "Select Ticket",
     timezoneLabel: "WIB",
     currencySymbol: "IDR",
-    logoAlt: "ASDP Logo"
+    logoAlt: "ASDP Logo",
+    verifyingTicketButton: "Verifying Ticket"
   }
 };
 
@@ -1342,7 +1374,8 @@ var CardTicket = ({
   onPriceDetailClick,
   onPolicyClick,
   onSelectTicket,
-  isLoading = false
+  isLoading = false,
+  isVerifyingTicket = false
 }) => {
   const styles = useStyles5();
   const { width } = useWindowSize();
@@ -1692,8 +1725,13 @@ var CardTicket = ({
                   style: { backgroundColor: brandColors["60"] },
                   size: "medium",
                   shape: "circular",
-                  icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
-                  children: buttonText || mergedLabels.selectTicketButton
+                  icon: isVerifyingTicket ? null : /* @__PURE__ */ jsx(Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
+                  disabled: isVerifyingTicket,
+                  children: isVerifyingTicket ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(Spinner, { size: "extra-tiny", style: { marginRight: "5px" } }),
+                    " ",
+                    mergedLabels.verifyingTicketButton
+                  ] }) : buttonText || mergedLabels.selectTicketButton
                 }
               )
             ] }),
@@ -8741,18 +8779,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);
@@ -8826,8 +8864,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__ */ jsxs("div", { className: styles.container, children: [
     onFilterClick && /* @__PURE__ */ jsx(
@@ -8859,7 +8898,10 @@ var SortMenu = ({
         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__ */ jsx(
             Radio,
             {
@@ -9108,11 +9150,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) => {
@@ -9288,8 +9331,8 @@ var ModalFilterTicket = ({
       isLoading ? renderServiceTypesSkeleton() : /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
         /* @__PURE__ */ jsx(Body1, { children: mergedLabels.serviceTypeLabel }),
         /* @__PURE__ */ 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__ */ jsx(
             Button,
@@ -9297,7 +9340,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
             },
@@ -13347,23 +13390,23 @@ var useStyles28 = makeStyles({
   },
   circularLeft: {
     position: "absolute",
-    width: "80px",
-    height: "80px",
+    width: "75px",
+    height: "75px",
     borderRadius: "50%",
     backgroundColor: 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: tokens.colorNeutralBackground1Hover,
     right: "-37px",
-    bottom: "-30px",
+    bottom: "-42px",
     zIndex: 2,
     boxShadow: "inset 3px 0px 1px rgba(0, 0, 0, 0.1)"
   },