@asdp/ferryui 0.1.22-dev.10750 → 0.1.22-dev.10755

package/dist/index.mjs

@@ -1,7 +1,7 @@
 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, Subtitle1, Title2, Divider, Title3, Spinner, Label, Text, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Menu, MenuTrigger, MenuPopover, MenuList, Radio, DialogActions, Caption2Strong, Link, Body2, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, typographyStyles, Switch, Textarea } 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, ArrowRightRegular } from '@fluentui/react-icons';
+import { ArrowDownloadRegular, Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular, ChevronDownRegular, ArrowRightRegular } from '@fluentui/react-icons';
 import { Container, Row, Col, Visible } from 'react-grid-system';
 import { Icon } from '@iconify/react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
@@ -16423,10 +16423,12 @@ var CardPriceDetails = ({
 // src/components/CardPaymentMethodList/CardPaymentMethodList.constants.ts
 var DEFAULT_LABELS36 = {
   id: {
-    selectAriaLabel: "Pilih metode pembayaran"
+    selectAriaLabel: "Pilih metode pembayaran",
+    method: "Metode Pembayaran"
   },
   en: {
-    selectAriaLabel: "Select payment method"
+    selectAriaLabel: "Select payment method",
+    method: "Payment Method"
   }
 };
 var useStyles38 = makeStyles({
@@ -16491,55 +16493,160 @@ var CardPaymentMethodList = ({
 }) => {
   const styles = useStyles38();
   const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
-  return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsx("div", { className: `${styles.container}`, children: methods.map((category, index) => /* @__PURE__ */ jsxs("div", { children: [
-    index > 0 && /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, {}) }),
-    /* @__PURE__ */ jsx(Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxs(AccordionItem, { value: category.value, children: [
-      /* @__PURE__ */ jsx(
-        AccordionHeader,
-        {
-          expandIconPosition: "end",
-          className: styles.title,
-          children: /* @__PURE__ */ jsx(Body1, { children: category.title || category.value })
-        }
-      ),
-      /* @__PURE__ */ jsx(AccordionPanel, { children: /* @__PURE__ */ jsx("div", { className: styles.itemContainer, children: category.options.map((option) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: styles.optionContainer,
-          onClick: () => onSelect(option.value),
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: styles.codeImage, children: [
+  return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [
+    /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.method }),
+    methods.map((category, index) => /* @__PURE__ */ jsxs("div", { children: [
+      index > 0 && /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, {}) }),
+      /* @__PURE__ */ jsx(Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxs(AccordionItem, { value: category.value, children: [
+        /* @__PURE__ */ jsx(
+          AccordionHeader,
+          {
+            expandIconPosition: "end",
+            className: styles.title,
+            children: /* @__PURE__ */ jsx(Body1, { children: category.title || category.value })
+          }
+        ),
+        /* @__PURE__ */ jsx(AccordionPanel, { children: /* @__PURE__ */ jsx("div", { className: styles.itemContainer, children: category.options.map((option) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: styles.optionContainer,
+            onClick: () => onSelect(option.value),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.codeImage, children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: option.image,
+                    alt: option.label,
+                    className: styles.image
+                  }
+                ),
+                /* @__PURE__ */ jsx(Subtitle2, { className: styles.optionLabel, children: option.label })
+              ] }),
               /* @__PURE__ */ jsx(
-                "img",
+                Radio,
                 {
-                  src: option.image,
-                  alt: option.label,
-                  className: styles.image
+                  checked: selectedValue === option.value,
+                  onChange: () => onSelect(option.value),
+                  value: option.value,
+                  name: "payment-method",
+                  disabled: option.disabled,
+                  "aria-label": `${mergedLabels.selectAriaLabel} ${option.label}`
                 }
-              ),
-              /* @__PURE__ */ jsx(Subtitle2, { className: styles.optionLabel, children: option.label })
-            ] }),
-            /* @__PURE__ */ jsx(
-              Radio,
-              {
-                checked: selectedValue === option.value,
-                onChange: () => onSelect(option.value),
-                value: option.value,
-                name: "payment-method",
-                disabled: option.disabled,
-                "aria-label": `${mergedLabels.selectAriaLabel} ${option.label}`
-              }
-            )
-          ]
-        },
-        option.value
-      )) }) })
-    ] }) })
-  ] }, category.value || index)) }) });
+              )
+            ]
+          },
+          option.value
+        )) }) })
+      ] }) })
+    ] }, category.value || index))
+  ] }) });
 };
 
-// src/components/CardPaymentGuide/CardPaymentGuide.constants.ts
+// src/components/CardPaymentMethodFavorite/CardPaymentMethodFavorite.constants.ts
 var DEFAULT_LABELS37 = {
+  id: {
+    method: "Metode Pembayaran Favorit",
+    warningMessage: "Harap pilih salah satu metode pembayaran di bawah ini untuk melanjutkan.",
+    viewAllMethods: "Lihat Semua Metode Pembayaran",
+    selectAriaLabel: "Pilih metode pembayaran"
+  },
+  en: {
+    method: "Favorite Payment Method",
+    warningMessage: "Please select one of the payment methods below to continue.",
+    viewAllMethods: "View All Payment Methods",
+    selectAriaLabel: "Select payment method"
+  }
+};
+var useStyles39 = makeStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    rowGap: tokens.spacingHorizontalXXL
+  },
+  image: {
+    width: "40px",
+    height: "40px",
+    objectFit: "contain"
+  },
+  card: {
+    position: "relative",
+    borderRadius: tokens.borderRadiusXLarge,
+    ...shorthands.padding(
+      tokens.spacingHorizontalXL,
+      tokens.spacingVerticalXXL
+    ),
+    backgroundColor: tokens.colorNeutralBackground1,
+    zIndex: 3
+  }
+});
+var CardPaymentMethodFavorite = ({
+  language = "id",
+  labels,
+  methods,
+  selectedValue,
+  onSelect,
+  onViewAllMethods,
+  showWarning = true,
+  showViewAllButton = true
+}) => {
+  const styles = useStyles39();
+  const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
+  return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [
+    /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.method }),
+    showWarning && /* @__PURE__ */ jsx(
+      MessageBar,
+      {
+        intent: "warning",
+        style: { borderRadius: tokens.borderRadiusLarge },
+        children: /* @__PURE__ */ jsx(
+          Caption1Strong,
+          {
+            style: { color: tokens.colorStatusWarningForeground1 },
+            children: mergedLabels.warningMessage
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Row, { nogutter: true, style: { gap: tokens.spacingVerticalL }, children: methods.map((option) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { justify: "between", children: [
+      /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: option.image,
+          alt: option.label,
+          className: styles.image
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(Subtitle2, { children: option.label }) }),
+      /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
+        Radio,
+        {
+          checked: selectedValue === option.value,
+          onChange: () => onSelect(option.value),
+          value: option.value,
+          name: "payment-method-favorite",
+          disabled: option.disabled,
+          "aria-label": `${mergedLabels.selectAriaLabel} ${option.label}`
+        }
+      ) })
+    ] }) }, option.value)) }),
+    showViewAllButton && /* @__PURE__ */ jsx(
+      Button,
+      {
+        style: { width: "100%" },
+        appearance: "transparent",
+        iconPosition: "after",
+        icon: /* @__PURE__ */ jsx(ChevronDownRegular, {}),
+        onClick: onViewAllMethods,
+        children: mergedLabels.viewAllMethods
+      }
+    )
+  ] }) });
+};
+
+// src/components/CardPaymentGuide/CardPaymentGuide.constants.ts
+var DEFAULT_LABELS38 = {
   id: {
     title: "Cara Pembayaran"
   },
@@ -16547,7 +16654,7 @@ var DEFAULT_LABELS37 = {
     title: "Payment Method"
   }
 };
-var useStyles39 = makeStyles({
+var useStyles40 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -16583,8 +16690,8 @@ var CardPaymentGuide = ({
   guides,
   className
 }) => {
-  const styles = useStyles39();
-  const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
+  const styles = useStyles40();
+  const mergedLabels = { ...DEFAULT_LABELS38[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     displayTitle && /* @__PURE__ */ jsx("div", { className: styles.titleContainer, children: /* @__PURE__ */ jsx(Subtitle1, { className: styles.title, children: displayTitle }) }),
@@ -16603,7 +16710,7 @@ var CardPaymentGuide = ({
 };
 
 // src/components/CardPaymentInfo/CardPaymentInfo.constants.ts
-var DEFAULT_LABELS38 = {
+var DEFAULT_LABELS39 = {
   id: {
     expiryPrefix: "Kode virtual akun berlaku sampai",
     copyCodeButton: "Salin Kode",
@@ -16623,7 +16730,7 @@ var DEFAULT_LABELS38 = {
     changePayment: "Change Payment Method"
   }
 };
-var useStyles40 = makeStyles({
+var useStyles41 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -16715,8 +16822,8 @@ var CardPaymentInfo = ({
   onCheckStatus,
   onChangePayment
 }) => {
-  const styles = useStyles40();
-  const mergedLabels = { ...DEFAULT_LABELS38[language], ...labels };
+  const styles = useStyles41();
+  const mergedLabels = { ...DEFAULT_LABELS39[language], ...labels };
   return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
       /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.expiryPrefix }),
@@ -16788,7 +16895,7 @@ var CardPaymentInfo = ({
 };
 
 // src/components/CardStatusOrder/CardStatusOrder.constants.ts
-var DEFAULT_LABELS39 = {
+var DEFAULT_LABELS40 = {
   id: {
     detailTitle: "Detail Pemesanan",
     statusLabel: "Status",
@@ -16818,7 +16925,7 @@ var DEFAULT_LABELS39 = {
     illustrationAlt: "E-Ticket Illustration"
   }
 };
-var useStyles41 = makeStyles({
+var useStyles42 = makeStyles({
   activeCard: {
     width: "100%",
     // padding: tokens.spacingHorizontalNone, // default
@@ -16888,8 +16995,8 @@ var CardStatusOrder = ({
   onClickViewTicket,
   className
 }) => {
-  const styles = useStyles41();
-  const mergedLabels = { ...DEFAULT_LABELS39[language], ...labels };
+  const styles = useStyles42();
+  const mergedLabels = { ...DEFAULT_LABELS40[language], ...labels };
   const displayStatus = statusLabel || mergedLabels.defaultStatus;
   const displayTitle = title || mergedLabels.defaultTitle;
   const displayDescription = description || mergedLabels.defaultDescription;
@@ -16986,7 +17093,7 @@ var CardStatusOrder = ({
 };
 
 // src/components/ModalPriceDetail/ModalPriceDetail.constants.ts
-var DEFAULT_LABELS40 = {
+var DEFAULT_LABELS41 = {
   id: {
     title: "Rincian Harga",
     passengerDetailHeader: "Detail Penumpang",
@@ -17018,7 +17125,7 @@ var DEFAULT_LABELS40 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles42 = makeStyles({
+var useStyles43 = makeStyles({
   surface: {
     width: "680px",
     maxWidth: "90vw",
@@ -17178,8 +17285,8 @@ var ModalPriceDetail = ({
   roundTripGrandTotal,
   ...props
 }) => {
-  const styles = useStyles42();
-  const mergedLabels = { ...DEFAULT_LABELS40[language], ...labels };
+  const styles = useStyles43();
+  const mergedLabels = { ...DEFAULT_LABELS41[language], ...labels };
   const locale = language === "id" ? "id-ID" : "en-US";
   const formatCurrency = (value) => `${mergedLabels.currencyCode} ${value.toLocaleString(locale)}`;
   const passengerItemsFromNested = detailItems.flatMap(
@@ -17708,7 +17815,7 @@ var ModalPriceDetail = ({
 // src/components/FileUpload/FileUpload.constants.ts
 var ACCEPTED_FILES = ".pdf,.jpg,.jpeg,.png";
 var MAX_FILE_SIZE_MB = 10;
-var DEFAULT_LABELS41 = {
+var DEFAULT_LABELS42 = {
   id: {
     placeholder: "Ketuk untuk pilih file",
     maxSizeWarning: "Maksimal {maxSize}MB per file dalam format PDF, JPG, JPEG, PNG.",
@@ -17726,7 +17833,7 @@ var DEFAULT_LABELS41 = {
     downloadTemplateDocument: "Download Template Document"
   }
 };
-var useStyles43 = makeStyles({
+var useStyles44 = makeStyles({
   surface: {
     maxWidth: "90vw",
     maxHeight: "90vh",
@@ -17753,7 +17860,7 @@ var ModalPreviewImage = ({
   imageUrl,
   alt = "Preview"
 }) => {
-  const styles = useStyles43();
+  const styles = useStyles44();
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (_, data) => onOpenChange(data.open), children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.surface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
     /* @__PURE__ */ jsx(
       DialogTitle,
@@ -17879,7 +17986,7 @@ var FileUpload = React.forwardRef(
     downloadTemplateDocument = false,
     infoLabel
   }, ref) => {
-    const mergedLabels = { ...DEFAULT_LABELS41[language], ...customLabels };
+    const mergedLabels = { ...DEFAULT_LABELS42[language], ...customLabels };
     const styles = uploadStyles();
     const fileInputRef = useRef(null);
     const [, setIsDragOver] = useState(false);
@@ -18316,11 +18423,11 @@ function hexToRgba(hex, alpha = 1) {
 }
 
 // src/components/CardProfileMenu/CardProfileMenu.constants.ts
-var DEFAULT_LABELS42 = {
+var DEFAULT_LABELS43 = {
   id: {},
   en: {}
 };
-var useStyles44 = makeStyles({
+var useStyles45 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -18380,8 +18487,8 @@ var CardProfileMenu = ({
   selectedValue,
   onTabSelect
 }) => {
-  const styles = useStyles44();
-  ({ ...DEFAULT_LABELS42[language], ...labels });
+  const styles = useStyles45();
+  ({ ...DEFAULT_LABELS43[language], ...labels });
   const handleTabSelect = (_, data) => {
     onTabSelect(data.value);
   };
@@ -18410,6 +18517,6 @@ var CardProfileMenu = ({
   ) });
 };
 
-export { API_CONFIG, API_ERROR_MESSAGES, BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, COUNTRIES, CardAddon, CardBanner, CardBookingAddOn, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewDetail, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS8 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS9 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS18 as DateFilterDefaultLabels, EmptyContent, DEFAULT_LABELS11 as EmptyContentDefaultLabels, FileUpload_default as FileUpload, GENDER, HARDCODED_ID, HARDCODED_NAME, HTTP_STATUS, IDENTITY_TYPE, InputDynamic_default as InputDynamic, LOAD_TYPE, MANIFEST_ENTITY, MODAL_PRESETS, MY_TICKET_STATUS, MY_TICKET_TAB, ModalFilterTicket, DEFAULT_LABELS17 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListMenuService, ModalListPassenger, ModalPassengerForm, ModalPreviewImage, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, PASSENGER_TYPE, SortMenu, Stepper, calculateAge, getBadgeConfig, getModalPreset, getSortLabel, hexToRgba };
+export { API_CONFIG, API_ERROR_MESSAGES, BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, COUNTRIES, CardAddon, CardBanner, CardBookingAddOn, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodFavorite, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewDetail, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS8 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS9 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS18 as DateFilterDefaultLabels, EmptyContent, DEFAULT_LABELS11 as EmptyContentDefaultLabels, FileUpload_default as FileUpload, GENDER, HARDCODED_ID, HARDCODED_NAME, HTTP_STATUS, IDENTITY_TYPE, InputDynamic_default as InputDynamic, LOAD_TYPE, MANIFEST_ENTITY, MODAL_PRESETS, MY_TICKET_STATUS, MY_TICKET_TAB, ModalFilterTicket, DEFAULT_LABELS17 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListMenuService, ModalListPassenger, ModalPassengerForm, ModalPreviewImage, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, PASSENGER_TYPE, SortMenu, Stepper, calculateAge, getBadgeConfig, getModalPreset, getSortLabel, hexToRgba };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map