@asdp/ferryui 0.1.22-dev.8523 → 0.1.22-dev.8568

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { makeStyles, tokens, shorthands, createLightTheme, createDarkTheme, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, mergeClasses, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, Subtitle1, Switch, Body1Stronger, Caption1Stronger, Display, Image, Title1, typographyStyles, Textarea, Link } from '@fluentui/react-components';
+import { makeStyles, tokens, shorthands, createLightTheme, createDarkTheme, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, mergeClasses, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, Subtitle1, Switch, Body1Stronger, Caption1Stronger, Display, Image, Title1, DialogTrigger, TabList, Tab, Body2, typographyStyles, Textarea, Link } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React5, { forwardRef, useState, useCallback, useRef, useEffect, useMemo, Fragment as Fragment$1 } from 'react';
 import { Row, Col, Visible } from 'react-grid-system';
@@ -8928,34 +8928,6 @@ var CardReview = ({
     ] })
   ] });
 };
-var getBadgeConfig2 = (ticketClass) => {
-  const normalizedClass = ticketClass?.toUpperCase();
-  switch (normalizedClass) {
-    case "EKONOMI":
-    case "ECONOMY":
-      return {
-        color: "#A74109",
-        icon: "/assets/images/class/shield_badge_ekonomi.svg"
-      };
-    case "BISNIS":
-    case "BUSINESS":
-      return {
-        color: "#859599",
-        icon: "/assets/images/class/ribbon_badge_bisnis.svg"
-      };
-    case "EKSEKUTIF":
-    case "EXECUTIVE":
-      return {
-        color: "#C19C00",
-        icon: "/assets/images/class/crown_badge_eksekutif.svg"
-      };
-    default:
-      return {
-        color: tokens.colorNeutralBackground3,
-        icon: ""
-      };
-  }
-};
 var useStyles30 = makeStyles({
   card: {
     padding: "1.5rem",
@@ -9059,7 +9031,7 @@ var CardReviewPassenger = ({
       /* @__PURE__ */ jsx("div", { className: styles.headerLine })
     ] }),
     /* @__PURE__ */ jsx("div", { className: styles.contentContainer, children: passengers.map((passenger, index) => {
-      const badgeConfig = getBadgeConfig2(passenger.serviceClass);
+      const badgeConfig = getBadgeConfig(passenger.serviceClass);
       return /* @__PURE__ */ jsxs("div", { className: styles.passengerItem, children: [
         /* @__PURE__ */ jsxs("div", { className: styles.itemHeader, children: [
           /* @__PURE__ */ jsx(Subtitle2, { className: styles.name, children: passenger.name }),
@@ -9721,7 +9693,300 @@ var CardStatusOrder = ({
     ) }) })
   ] }) });
 };
+var useStyles37 = makeStyles({
+  surface: {
+    width: "680px",
+    maxWidth: "90vw",
+    ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalL),
+    borderRadius: tokens.borderRadiusXLarge
+  },
+  dialogTitle: {
+    "& h2": {
+      fontSize: tokens.fontSizeBase600,
+      fontWeight: tokens.fontWeightSemibold
+    }
+  },
+  card: {
+    backgroundColor: tokens.colorNeutralBackground1,
+    ...shorthands.border("1px", "solid", tokens.colorNeutralStroke2),
+    ...shorthands.padding(tokens.spacingVerticalXXL, tokens.spacingHorizontalXXL),
+    boxShadow: "none"
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalL
+  },
+  section: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalS
+  },
+  row: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  vehicleTitle: {
+    fontSize: tokens.fontSizeBase500,
+    fontWeight: tokens.fontWeightSemibold,
+    color: tokens.colorNeutralForeground4
+  },
+  passengerDetail: {
+    color: tokens.colorNeutralForeground4,
+    fontSize: tokens.fontSizeBase200,
+    marginTop: tokens.spacingVerticalXS
+  },
+  addonHeader: {
+    fontSize: tokens.fontSizeBase500,
+    fontWeight: tokens.fontWeightSemibold,
+    color: tokens.colorNeutralForeground1,
+    marginTop: tokens.spacingVerticalM
+  },
+  priceValue: {
+    color: tokens.colorNeutralForeground4,
+    fontSize: tokens.fontSizeBase300
+  },
+  itemLabel: {
+    color: tokens.colorNeutralForeground4,
+    fontSize: tokens.fontSizeBase300
+  },
+  totalLabel: {
+    color: tokens.colorNeutralForeground4,
+    fontSize: tokens.fontSizeBase400
+  },
+  totalValue: {
+    color: tokens.colorNeutralForeground4,
+    fontSize: tokens.fontSizeBase400
+  },
+  totalTagihanLabel: {
+    color: tokens.colorNeutralForeground1,
+    fontWeight: tokens.fontWeightSemibold,
+    fontSize: tokens.fontSizeBase400
+  },
+  totalTagihanValue: {
+    color: tokens.colorNeutralForeground1,
+    fontWeight: tokens.fontWeightSemibold,
+    fontSize: tokens.fontSizeBase400
+  },
+  ppnLabel: {
+    color: tokens.colorNeutralForeground4,
+    fontSize: tokens.fontSizeBase400
+  },
+  ppnValue: {
+    color: tokens.colorNeutralForeground4,
+    fontSize: tokens.fontSizeBase400
+  },
+  ppnNote: {
+    color: tokens.colorNeutralForeground4,
+    fontSize: tokens.fontSizeBase100,
+    fontStyle: "italic",
+    marginTop: tokens.spacingVerticalXS
+  },
+  grandTotalLabel: {
+    color: "#D13438",
+    fontSize: tokens.fontSizeHero700,
+    fontWeight: tokens.fontWeightSemibold
+  },
+  grandTotalValue: {
+    color: "#D13438",
+    fontSize: tokens.fontSizeHero800,
+    fontWeight: tokens.fontWeightSemibold
+  },
+  badge: {
+    marginLeft: tokens.spacingHorizontalS,
+    backgroundColor: "#107C10",
+    color: "white"
+  },
+  divider: {
+    margin: `${tokens.spacingVerticalL} 0`
+  },
+  closeButton: {
+    color: tokens.colorNeutralForeground1
+  }
+});
+var ModalPriceDetail = ({
+  isOpen,
+  onOpenChange,
+  detailItems,
+  addonItems,
+  subTotal,
+  taxAmount,
+  grandTotal,
+  ...props
+}) => {
+  const styles = useStyles37();
+  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (_, data) => onOpenChange(data.open), ...props, children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.surface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+    /* @__PURE__ */ jsx(
+      DialogTitle,
+      {
+        className: styles.dialogTitle,
+        action: /* @__PURE__ */ jsx(DialogTrigger, { action: "close", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "subtle",
+            "aria-label": "close",
+            icon: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M18 6L6 18M6 6L18 18",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ) })
+          }
+        ) }),
+        children: "Rincian Harga"
+      }
+    ),
+    /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: /* @__PURE__ */ jsx(Card, { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+      detailItems.map((item) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.vehicleTitle, children: item.label }),
+            item.badge && /* @__PURE__ */ jsx(Badge, { size: "medium", shape: "rounded", className: styles.badge, children: item.badge })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: styles.priceValue, children: [
+            "Rp. ",
+            item.price.toLocaleString("id-ID")
+          ] })
+        ] }),
+        item.list && item.list.map((subItem) => /* @__PURE__ */ jsxs("div", { className: styles.passengerDetail, children: [
+          /* @__PURE__ */ jsx("span", { children: subItem.label }),
+          /* @__PURE__ */ jsxs("span", { style: { float: "right" }, children: [
+            "IDR. ",
+            item.price.toLocaleString("id-ID")
+          ] })
+        ] }, subItem.key))
+      ] }, item.key)),
+      addonItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: styles.addonHeader, children: "Add On" }),
+        addonItems.map((item) => /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.itemLabel, children: item.label }),
+          /* @__PURE__ */ jsxs("span", { className: styles.priceValue, children: [
+            "IDR. ",
+            item.price.toLocaleString("id-ID")
+          ] })
+        ] }, item.key))
+      ] }),
+      /* @__PURE__ */ jsx(Divider, { className: styles.divider }),
+      /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.totalLabel, children: "Sub Tagihan" }),
+        /* @__PURE__ */ jsxs("span", { className: styles.totalValue, children: [
+          "IDR.",
+          subTotal.toLocaleString("id-ID")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.totalTagihanLabel, children: "Total Tagihan" }),
+        /* @__PURE__ */ jsxs("span", { className: styles.totalTagihanValue, children: [
+          "IDR.",
+          subTotal.toLocaleString("id-ID")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { marginTop: tokens.spacingVerticalL }, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.ppnLabel, children: "PPN (Pajak Pertambahan Nilai) 11%" }),
+          /* @__PURE__ */ jsxs("span", { className: styles.ppnValue, children: [
+            "IDR.",
+            taxAmount.toLocaleString("id-ID")
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: styles.ppnNote, children: "*PPN 11% dikenakan untuk biaya layanan dan biaya admin" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.row, style: { marginTop: tokens.spacingVerticalXXL }, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.grandTotalLabel, children: "Total Pembayaran" }),
+        /* @__PURE__ */ jsxs("span", { className: styles.grandTotalValue, children: [
+          "Rp.",
+          grandTotal.toLocaleString("id-ID")
+        ] })
+      ] })
+    ] }) }) })
+  ] }) }) });
+};
+var useStyles38 = makeStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: tokens.colorNeutralBackground1,
+    ...shorthands.padding(tokens.spacingVerticalL),
+    ...shorthands.border(tokens.strokeWidthThin, "solid", tokens.colorNeutralStroke1),
+    borderRadius: tokens.borderRadiusXLarge,
+    rowGap: tokens.spacingHorizontalXXL,
+    width: "100%"
+  },
+  sectionList: {
+    display: "flex",
+    flexDirection: "column",
+    rowGap: tokens.spacingHorizontalXXL
+  },
+  sectionGap: {
+    display: "flex",
+    flexDirection: "column",
+    rowGap: tokens.spacingVerticalM
+  },
+  labelTab: {
+    fontWeight: tokens.fontWeightMedium,
+    paddingLeft: tokens.spacingHorizontalMNudge
+  },
+  tabItem: {
+    '&[aria-selected="false"]': {
+      backgroundColor: "transparent"
+    },
+    '&[aria-selected="true"]': {
+      // brandColors[140] approx #EBF3FC (light blue)
+      // brandColors[80] approx #0F6CBD (primary blue)
+      // Using generic tokens or hardcoded fallback if brand tokens not available here
+      backgroundColor: tokens.colorBrandBackground2,
+      color: tokens.colorBrandForeground1
+    },
+    justifyContent: "flex-start"
+  },
+  tabItemLogout: {
+    color: tokens.colorPaletteRedForeground1,
+    backgroundColor: "transparent",
+    justifyContent: "flex-start",
+    "&:hover": {
+      color: tokens.colorPaletteRedForeground1
+    }
+  }
+});
+var CardProfileMenu = ({
+  sections,
+  selectedValue,
+  onTabSelect
+}) => {
+  const styles = useStyles38();
+  const handleTabSelect = (_, data) => {
+    onTabSelect(data.value);
+  };
+  return /* @__PURE__ */ jsx("div", { className: styles.container, children: /* @__PURE__ */ jsx(
+    TabList,
+    {
+      vertical: true,
+      appearance: "filled-circular",
+      selectedValue,
+      onTabSelect: handleTabSelect,
+      children: /* @__PURE__ */ jsx("div", { className: styles.sectionList, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { className: styles.sectionGap, children: [
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Subtitle1, { className: styles.labelTab, children: section.sectionLabel }) }),
+        section.tabs.map((tab) => /* @__PURE__ */ jsx(
+          Tab,
+          {
+            id: tab.value,
+            value: tab.value,
+            icon: /* @__PURE__ */ jsx(Icon, { icon: tab.icon, width: 20, height: 20 }),
+            className: tab.value === "/logout" ? styles.tabItemLogout : styles.tabItem,
+            children: /* @__PURE__ */ jsx(Body2, { children: tab.label })
+          },
+          tab.value
+        ))
+      ] }, sectionIndex)) })
+    }
+  ) });
+};
 
-export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardPromo, CardReview, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS2 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_COUNTRY_CODES, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_CLASSES, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS4 as DateFilterDefaultLabels, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalFilterTicket, DEFAULT_LABELS3 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListPassenger, ModalPassengerForm, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, PriceDetailsTerms, SortMenu, Stepper, getBadgeConfig, getModalPreset, getSortLabel };
+export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS2 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_COUNTRY_CODES, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_CLASSES, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS4 as DateFilterDefaultLabels, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalFilterTicket, DEFAULT_LABELS3 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListPassenger, ModalPassengerForm, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, SortMenu, Stepper, getBadgeConfig, getModalPreset, getSortLabel };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map