@asdp/ferryui 0.1.22-dev.9698 → 0.1.22-dev.9701

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
@@ -238,6 +268,8 @@ var fontWeight = {
 var sharedColors = {
   "Shared_Cranberry_Primary": "#c50f1f",
   "Shared_Red_Primary": "#d13438",
+  "Shared_Orange_Shade_20": "#bc4b09",
+  "Shared_Orange_Tint_60": "#fff9f5",
   "Shared_Green_Primary": "#107c10"};
 var lightModeColors = {
   "Neutral_Foreground_Disabled_Rest": "#bdbdbd",
@@ -1112,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",
@@ -1124,7 +1157,8 @@ var DEFAULT_LABELS5 = {
     selectTicketButton: "Select Ticket",
     timezoneLabel: "WIB",
     currencySymbol: "IDR",
-    logoAlt: "ASDP Logo"
+    logoAlt: "ASDP Logo",
+    verifyingTicketButton: "Verifying Ticket"
   }
 };
 
@@ -1340,7 +1374,8 @@ var CardTicket = ({
   onPriceDetailClick,
   onPolicyClick,
   onSelectTicket,
-  isLoading = false
+  isLoading = false,
+  isVerifyingTicket = false
 }) => {
   const styles = useStyles5();
   const { width } = useWindowSize();
@@ -1690,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
                 }
               )
             ] }),
@@ -8739,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);
@@ -8824,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(
@@ -8857,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,
             {
@@ -9106,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) => {
@@ -9286,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,
@@ -9295,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
             },
@@ -11849,6 +11894,25 @@ var useStyles25 = makeStyles({
     height: "32px",
     zIndex: 1,
     filter: "drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))"
+  },
+  warningBanner: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.75rem",
+    backgroundColor: sharedColors.Shared_Orange_Tint_60,
+    border: `1px solid ${sharedColors.Shared_Orange_Shade_20}`,
+    borderRadius: tokens.borderRadiusLarge,
+    padding: "0.75rem 1rem",
+    marginBottom: "1.5rem"
+  },
+  warningIcon: {
+    color: sharedColors.Shared_Orange_Shade_20,
+    flexShrink: 0,
+    display: "flex"
+  },
+  warningText: {
+    color: sharedColors.Shared_Orange_Shade_20,
+    fontSize: tokens.fontSizeBase300
   }
 });
 var CardPassengerList = ({
@@ -11867,6 +11931,10 @@ var CardPassengerList = ({
       /* @__PURE__ */ jsx(Title3, { className: styles.headerTitle, children: displayTitle }),
       /* @__PURE__ */ jsx("div", { className: styles.headerLine })
     ] }),
+    passengers.filter((p) => p.id).length !== passengers.length && /* @__PURE__ */ jsxs("div", { className: styles.warningBanner, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.warningIcon, children: /* @__PURE__ */ jsx(Icon, { icon: "fluent:warning-20-filled", width: 24, height: 24 }) }),
+      /* @__PURE__ */ jsx("div", { className: styles.warningText, children: "Harap isi data penumpang dibawah ini untuk bisa melanjutkan pembelian tiket." })
+    ] }),
     /* @__PURE__ */ jsx("div", { className: styles.passengerList, children: passengers.map((passenger, index) => {
       const badgeConfig = getBadgeConfig(passenger.serviceName);
       return /* @__PURE__ */ jsxs(
@@ -11884,7 +11952,7 @@ var CardPassengerList = ({
           },
           children: [
             /* @__PURE__ */ jsx("div", { className: styles.passengerInfo, children: /* @__PURE__ */ jsxs(Subtitle2, { className: styles.passengerText, children: [
-              passenger.name || `${mergedLabels.passengerPrefix} ${index + 1}`,
+              passenger.fullName || `${mergedLabels.passengerPrefix} ${index + 1}`,
               " ",
               "(",
               passenger.passengerType,
@@ -11916,7 +11984,7 @@ var CardPassengerList = ({
                   /* @__PURE__ */ jsx(
                     Icon,
                     {
-                      icon: passenger.name && passenger.serviceName ? "fluent:edit-24-regular" : "fluent:chevron-right-24-regular",
+                      icon: passenger.id && passenger.serviceName ? "fluent:edit-24-regular" : "fluent:chevron-right-24-regular",
                       width: 20,
                       height: 20
                     }