@asdp/ferryui 0.1.22-dev.8523 → 0.1.22-dev.8568
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +58 -20
- package/dist/index.d.ts +58 -20
- package/dist/index.js +296 -30
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +296 -31
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1943,16 +1943,6 @@ interface PassengerListItem {
|
|
|
1943
1943
|
*/
|
|
1944
1944
|
serviceName?: string;
|
|
1945
1945
|
}
|
|
1946
|
-
interface BadgeConfig {
|
|
1947
|
-
/**
|
|
1948
|
-
* Badge background color
|
|
1949
|
-
*/
|
|
1950
|
-
color: string;
|
|
1951
|
-
/**
|
|
1952
|
-
* Path to badge icon
|
|
1953
|
-
*/
|
|
1954
|
-
icon: string;
|
|
1955
|
-
}
|
|
1956
1946
|
interface CardPassengerListProps {
|
|
1957
1947
|
/**
|
|
1958
1948
|
* Card title
|
|
@@ -1993,13 +1983,6 @@ interface CardPassengerListProps {
|
|
|
1993
1983
|
*/
|
|
1994
1984
|
declare const CardPassengerList: React$1.FC<CardPassengerListProps>;
|
|
1995
1985
|
|
|
1996
|
-
/**
|
|
1997
|
-
* Get badge configuration based on ticket class
|
|
1998
|
-
* @param ticketClass - The ticket class (ECONOMY, BUSINESS, EXECUTIVE)
|
|
1999
|
-
* @returns Badge configuration with color and icon path
|
|
2000
|
-
*/
|
|
2001
|
-
declare const getBadgeConfig: (ticketClass?: string) => BadgeConfig;
|
|
2002
|
-
|
|
2003
1986
|
interface CardVehicleDetailProps {
|
|
2004
1987
|
/**
|
|
2005
1988
|
* Title of the vehicle service type
|
|
@@ -2437,8 +2420,6 @@ interface CardPriceDetailsProps {
|
|
|
2437
2420
|
|
|
2438
2421
|
declare const CardPriceDetails: React$1.FC<CardPriceDetailsProps>;
|
|
2439
2422
|
|
|
2440
|
-
declare const PriceDetailsTerms: React$1.FC;
|
|
2441
|
-
|
|
2442
2423
|
interface PaymentOption {
|
|
2443
2424
|
label: string;
|
|
2444
2425
|
value: string;
|
|
@@ -2512,4 +2493,61 @@ interface CardStatusOrderProps {
|
|
|
2512
2493
|
|
|
2513
2494
|
declare const CardStatusOrder: React$1.FC<CardStatusOrderProps>;
|
|
2514
2495
|
|
|
2515
|
-
|
|
2496
|
+
interface PriceDetailItem {
|
|
2497
|
+
key: string;
|
|
2498
|
+
label: string | React.ReactNode;
|
|
2499
|
+
price: number;
|
|
2500
|
+
badge?: string;
|
|
2501
|
+
list?: PriceDetailItem[];
|
|
2502
|
+
}
|
|
2503
|
+
interface ModalPriceDetailProps {
|
|
2504
|
+
isOpen: boolean;
|
|
2505
|
+
onOpenChange: (open: boolean) => void;
|
|
2506
|
+
detailItems: PriceDetailItem[];
|
|
2507
|
+
addonItems: PriceDetailItem[];
|
|
2508
|
+
subTotal: number;
|
|
2509
|
+
taxAmount: number;
|
|
2510
|
+
grandTotal: number;
|
|
2511
|
+
}
|
|
2512
|
+
|
|
2513
|
+
declare const ModalPriceDetail: React$1.FC<ModalPriceDetailProps>;
|
|
2514
|
+
|
|
2515
|
+
interface BadgeConfig {
|
|
2516
|
+
color: string;
|
|
2517
|
+
icon?: string;
|
|
2518
|
+
}
|
|
2519
|
+
/**
|
|
2520
|
+
* Get badge configuration based on ticket class
|
|
2521
|
+
* @param ticketClass - The ticket class (ECONOMY, BUSINESS, EXECUTIVE)
|
|
2522
|
+
* @returns Badge configuration with color and icon path
|
|
2523
|
+
*/
|
|
2524
|
+
declare const getBadgeConfig: (ticketClass?: string) => BadgeConfig;
|
|
2525
|
+
|
|
2526
|
+
interface ProfileMenuTab {
|
|
2527
|
+
label: string;
|
|
2528
|
+
value: string;
|
|
2529
|
+
icon: string;
|
|
2530
|
+
href?: string;
|
|
2531
|
+
}
|
|
2532
|
+
interface ProfileMenuSection {
|
|
2533
|
+
sectionLabel: string;
|
|
2534
|
+
tabs: ProfileMenuTab[];
|
|
2535
|
+
}
|
|
2536
|
+
interface CardProfileMenuProps {
|
|
2537
|
+
/**
|
|
2538
|
+
* List of menu sections with tabs
|
|
2539
|
+
*/
|
|
2540
|
+
sections: ProfileMenuSection[];
|
|
2541
|
+
/**
|
|
2542
|
+
* Currently selected tab value
|
|
2543
|
+
*/
|
|
2544
|
+
selectedValue?: string;
|
|
2545
|
+
/**
|
|
2546
|
+
* Callback when a tab is selected
|
|
2547
|
+
*/
|
|
2548
|
+
onTabSelect: (value: string) => void;
|
|
2549
|
+
}
|
|
2550
|
+
|
|
2551
|
+
declare const CardProfileMenu: React$1.FC<CardProfileMenuProps>;
|
|
2552
|
+
|
|
2553
|
+
export { BackgroundTicketCard, BackgroundTicketCardVertical, type BadgeConfig, CardAddon, type CardAddonProps, CardBanner, type CardBannerProps, CardBookingTicket, type CardBookingTicketProps, CardFAQ, type CardFAQProps, CardMealCatalog, type CardMealCatalogProps, CardOrdererInfo, type CardOrdererInfoProps, CardPassengerList, type CardPassengerListProps, CardPaymentGuide, type CardPaymentGuideProps, CardPaymentInfo, type CardPaymentInfoProps, CardPaymentMethodList, type CardPaymentMethodListProps, CardPriceDetails, type CardPriceDetailsProps, CardProfileMenu, type CardProfileMenuProps, CardPromo, type CardPromoProps, CardReview, CardReviewPassenger, type CardReviewPassengerProps, type CardReviewProps, CardServiceMenu, type CardServiceMenuProps, CardStatusOrder, type CardStatusOrderProps, CardTicket, type CardTicketProps, CardTicketSearch, DEFAULT_LABELS$3 as CardTicketSearchDefaultLabels, type CardTicketSearchFormData, type CardTicketSearchLabels, type CardTicketSearchProps, type ServiceMenuItem as CardTicketSearchServiceMenuItem, CardTicketSearchSummary, DEFAULT_LABELS$2 as CardTicketSearchSummaryDefaultLabels, type CardTicketSearchSummaryProps, CardVehicleDetail, type CardVehicleDetailProps, CardVehicleOwnerForm, type CardVehicleOwnerFormProps, type CargoItem, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryCode, 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_LABELS as DateFilterDefaultLabels, type DateFilterLabels, type DateFilterProps, type DateItem, type FilterCount, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalFilterTicket, DEFAULT_LABELS$1 as ModalFilterTicketDefaultLabels, type ModalFilterTicketLabels, type ModalFilterTicketProps, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, ModalListPassenger, type PassengerItem as ModalListPassengerItem, type ModalListPassengerProps, ModalPassengerForm, type ModalPassengerFormProps, type ModalPresetKey, ModalPriceDetail, type ModalPriceDetailProps, ModalSearchHarbor, type ModalSearchHarborProps, ModalSearchTicket, type ModalSearchTicketProps, ModalSelectDate, type ModalSelectDateProps, ModalService, type ModalServiceProps, ModalTotalPassengers, type ModalTotalPassengersProps, ModalTypeOfService, type ModalTypeOfServiceProps, type OrdererInfo, type Passenger, type PassengerFormData, type PassengerListItem, type PassengerService, type PassengerServiceCode, type PassengerType, type PaymentStep, type PriceDetailItem, type ProfileMenuSection, type ProfileMenuTab, type RadioOption, type ReservationStep, type SearchSummaryField, type SearchTicketFormData, type SelectOption, type SelectedPassengerItem, type ServiceClass, type ServiceId, type ServiceItem, SortMenu, type SortMenuProps, type SortOption, type StepStatus, Stepper, type StepperProps, type StepperStep, type TabType, type TypeOfService, type VehicleOwner, getBadgeConfig, getModalPreset, getSortLabel };
|
package/dist/index.d.ts
CHANGED
|
@@ -1943,16 +1943,6 @@ interface PassengerListItem {
|
|
|
1943
1943
|
*/
|
|
1944
1944
|
serviceName?: string;
|
|
1945
1945
|
}
|
|
1946
|
-
interface BadgeConfig {
|
|
1947
|
-
/**
|
|
1948
|
-
* Badge background color
|
|
1949
|
-
*/
|
|
1950
|
-
color: string;
|
|
1951
|
-
/**
|
|
1952
|
-
* Path to badge icon
|
|
1953
|
-
*/
|
|
1954
|
-
icon: string;
|
|
1955
|
-
}
|
|
1956
1946
|
interface CardPassengerListProps {
|
|
1957
1947
|
/**
|
|
1958
1948
|
* Card title
|
|
@@ -1993,13 +1983,6 @@ interface CardPassengerListProps {
|
|
|
1993
1983
|
*/
|
|
1994
1984
|
declare const CardPassengerList: React$1.FC<CardPassengerListProps>;
|
|
1995
1985
|
|
|
1996
|
-
/**
|
|
1997
|
-
* Get badge configuration based on ticket class
|
|
1998
|
-
* @param ticketClass - The ticket class (ECONOMY, BUSINESS, EXECUTIVE)
|
|
1999
|
-
* @returns Badge configuration with color and icon path
|
|
2000
|
-
*/
|
|
2001
|
-
declare const getBadgeConfig: (ticketClass?: string) => BadgeConfig;
|
|
2002
|
-
|
|
2003
1986
|
interface CardVehicleDetailProps {
|
|
2004
1987
|
/**
|
|
2005
1988
|
* Title of the vehicle service type
|
|
@@ -2437,8 +2420,6 @@ interface CardPriceDetailsProps {
|
|
|
2437
2420
|
|
|
2438
2421
|
declare const CardPriceDetails: React$1.FC<CardPriceDetailsProps>;
|
|
2439
2422
|
|
|
2440
|
-
declare const PriceDetailsTerms: React$1.FC;
|
|
2441
|
-
|
|
2442
2423
|
interface PaymentOption {
|
|
2443
2424
|
label: string;
|
|
2444
2425
|
value: string;
|
|
@@ -2512,4 +2493,61 @@ interface CardStatusOrderProps {
|
|
|
2512
2493
|
|
|
2513
2494
|
declare const CardStatusOrder: React$1.FC<CardStatusOrderProps>;
|
|
2514
2495
|
|
|
2515
|
-
|
|
2496
|
+
interface PriceDetailItem {
|
|
2497
|
+
key: string;
|
|
2498
|
+
label: string | React.ReactNode;
|
|
2499
|
+
price: number;
|
|
2500
|
+
badge?: string;
|
|
2501
|
+
list?: PriceDetailItem[];
|
|
2502
|
+
}
|
|
2503
|
+
interface ModalPriceDetailProps {
|
|
2504
|
+
isOpen: boolean;
|
|
2505
|
+
onOpenChange: (open: boolean) => void;
|
|
2506
|
+
detailItems: PriceDetailItem[];
|
|
2507
|
+
addonItems: PriceDetailItem[];
|
|
2508
|
+
subTotal: number;
|
|
2509
|
+
taxAmount: number;
|
|
2510
|
+
grandTotal: number;
|
|
2511
|
+
}
|
|
2512
|
+
|
|
2513
|
+
declare const ModalPriceDetail: React$1.FC<ModalPriceDetailProps>;
|
|
2514
|
+
|
|
2515
|
+
interface BadgeConfig {
|
|
2516
|
+
color: string;
|
|
2517
|
+
icon?: string;
|
|
2518
|
+
}
|
|
2519
|
+
/**
|
|
2520
|
+
* Get badge configuration based on ticket class
|
|
2521
|
+
* @param ticketClass - The ticket class (ECONOMY, BUSINESS, EXECUTIVE)
|
|
2522
|
+
* @returns Badge configuration with color and icon path
|
|
2523
|
+
*/
|
|
2524
|
+
declare const getBadgeConfig: (ticketClass?: string) => BadgeConfig;
|
|
2525
|
+
|
|
2526
|
+
interface ProfileMenuTab {
|
|
2527
|
+
label: string;
|
|
2528
|
+
value: string;
|
|
2529
|
+
icon: string;
|
|
2530
|
+
href?: string;
|
|
2531
|
+
}
|
|
2532
|
+
interface ProfileMenuSection {
|
|
2533
|
+
sectionLabel: string;
|
|
2534
|
+
tabs: ProfileMenuTab[];
|
|
2535
|
+
}
|
|
2536
|
+
interface CardProfileMenuProps {
|
|
2537
|
+
/**
|
|
2538
|
+
* List of menu sections with tabs
|
|
2539
|
+
*/
|
|
2540
|
+
sections: ProfileMenuSection[];
|
|
2541
|
+
/**
|
|
2542
|
+
* Currently selected tab value
|
|
2543
|
+
*/
|
|
2544
|
+
selectedValue?: string;
|
|
2545
|
+
/**
|
|
2546
|
+
* Callback when a tab is selected
|
|
2547
|
+
*/
|
|
2548
|
+
onTabSelect: (value: string) => void;
|
|
2549
|
+
}
|
|
2550
|
+
|
|
2551
|
+
declare const CardProfileMenu: React$1.FC<CardProfileMenuProps>;
|
|
2552
|
+
|
|
2553
|
+
export { BackgroundTicketCard, BackgroundTicketCardVertical, type BadgeConfig, CardAddon, type CardAddonProps, CardBanner, type CardBannerProps, CardBookingTicket, type CardBookingTicketProps, CardFAQ, type CardFAQProps, CardMealCatalog, type CardMealCatalogProps, CardOrdererInfo, type CardOrdererInfoProps, CardPassengerList, type CardPassengerListProps, CardPaymentGuide, type CardPaymentGuideProps, CardPaymentInfo, type CardPaymentInfoProps, CardPaymentMethodList, type CardPaymentMethodListProps, CardPriceDetails, type CardPriceDetailsProps, CardProfileMenu, type CardProfileMenuProps, CardPromo, type CardPromoProps, CardReview, CardReviewPassenger, type CardReviewPassengerProps, type CardReviewProps, CardServiceMenu, type CardServiceMenuProps, CardStatusOrder, type CardStatusOrderProps, CardTicket, type CardTicketProps, CardTicketSearch, DEFAULT_LABELS$3 as CardTicketSearchDefaultLabels, type CardTicketSearchFormData, type CardTicketSearchLabels, type CardTicketSearchProps, type ServiceMenuItem as CardTicketSearchServiceMenuItem, CardTicketSearchSummary, DEFAULT_LABELS$2 as CardTicketSearchSummaryDefaultLabels, type CardTicketSearchSummaryProps, CardVehicleDetail, type CardVehicleDetailProps, CardVehicleOwnerForm, type CardVehicleOwnerFormProps, type CargoItem, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryCode, 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_LABELS as DateFilterDefaultLabels, type DateFilterLabels, type DateFilterProps, type DateItem, type FilterCount, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalFilterTicket, DEFAULT_LABELS$1 as ModalFilterTicketDefaultLabels, type ModalFilterTicketLabels, type ModalFilterTicketProps, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, ModalListPassenger, type PassengerItem as ModalListPassengerItem, type ModalListPassengerProps, ModalPassengerForm, type ModalPassengerFormProps, type ModalPresetKey, ModalPriceDetail, type ModalPriceDetailProps, ModalSearchHarbor, type ModalSearchHarborProps, ModalSearchTicket, type ModalSearchTicketProps, ModalSelectDate, type ModalSelectDateProps, ModalService, type ModalServiceProps, ModalTotalPassengers, type ModalTotalPassengersProps, ModalTypeOfService, type ModalTypeOfServiceProps, type OrdererInfo, type Passenger, type PassengerFormData, type PassengerListItem, type PassengerService, type PassengerServiceCode, type PassengerType, type PaymentStep, type PriceDetailItem, type ProfileMenuSection, type ProfileMenuTab, type RadioOption, type ReservationStep, type SearchSummaryField, type SearchTicketFormData, type SelectOption, type SelectedPassengerItem, type ServiceClass, type ServiceId, type ServiceItem, SortMenu, type SortMenuProps, type SortOption, type StepStatus, Stepper, type StepperProps, type StepperStep, type TabType, type TypeOfService, type VehicleOwner, getBadgeConfig, getModalPreset, getSortLabel };
|
package/dist/index.js
CHANGED
|
@@ -8937,34 +8937,6 @@ var CardReview = ({
|
|
|
8937
8937
|
] })
|
|
8938
8938
|
] });
|
|
8939
8939
|
};
|
|
8940
|
-
var getBadgeConfig2 = (ticketClass) => {
|
|
8941
|
-
const normalizedClass = ticketClass?.toUpperCase();
|
|
8942
|
-
switch (normalizedClass) {
|
|
8943
|
-
case "EKONOMI":
|
|
8944
|
-
case "ECONOMY":
|
|
8945
|
-
return {
|
|
8946
|
-
color: "#A74109",
|
|
8947
|
-
icon: "/assets/images/class/shield_badge_ekonomi.svg"
|
|
8948
|
-
};
|
|
8949
|
-
case "BISNIS":
|
|
8950
|
-
case "BUSINESS":
|
|
8951
|
-
return {
|
|
8952
|
-
color: "#859599",
|
|
8953
|
-
icon: "/assets/images/class/ribbon_badge_bisnis.svg"
|
|
8954
|
-
};
|
|
8955
|
-
case "EKSEKUTIF":
|
|
8956
|
-
case "EXECUTIVE":
|
|
8957
|
-
return {
|
|
8958
|
-
color: "#C19C00",
|
|
8959
|
-
icon: "/assets/images/class/crown_badge_eksekutif.svg"
|
|
8960
|
-
};
|
|
8961
|
-
default:
|
|
8962
|
-
return {
|
|
8963
|
-
color: reactComponents.tokens.colorNeutralBackground3,
|
|
8964
|
-
icon: ""
|
|
8965
|
-
};
|
|
8966
|
-
}
|
|
8967
|
-
};
|
|
8968
8940
|
var useStyles30 = reactComponents.makeStyles({
|
|
8969
8941
|
card: {
|
|
8970
8942
|
padding: "1.5rem",
|
|
@@ -9068,7 +9040,7 @@ var CardReviewPassenger = ({
|
|
|
9068
9040
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerLine })
|
|
9069
9041
|
] }),
|
|
9070
9042
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.contentContainer, children: passengers.map((passenger, index) => {
|
|
9071
|
-
const badgeConfig =
|
|
9043
|
+
const badgeConfig = getBadgeConfig(passenger.serviceClass);
|
|
9072
9044
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.passengerItem, children: [
|
|
9073
9045
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.itemHeader, children: [
|
|
9074
9046
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: styles.name, children: passenger.name }),
|
|
@@ -9730,6 +9702,299 @@ var CardStatusOrder = ({
|
|
|
9730
9702
|
) }) })
|
|
9731
9703
|
] }) });
|
|
9732
9704
|
};
|
|
9705
|
+
var useStyles37 = reactComponents.makeStyles({
|
|
9706
|
+
surface: {
|
|
9707
|
+
width: "680px",
|
|
9708
|
+
maxWidth: "90vw",
|
|
9709
|
+
...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalL, reactComponents.tokens.spacingHorizontalL),
|
|
9710
|
+
borderRadius: reactComponents.tokens.borderRadiusXLarge
|
|
9711
|
+
},
|
|
9712
|
+
dialogTitle: {
|
|
9713
|
+
"& h2": {
|
|
9714
|
+
fontSize: reactComponents.tokens.fontSizeBase600,
|
|
9715
|
+
fontWeight: reactComponents.tokens.fontWeightSemibold
|
|
9716
|
+
}
|
|
9717
|
+
},
|
|
9718
|
+
card: {
|
|
9719
|
+
backgroundColor: reactComponents.tokens.colorNeutralBackground1,
|
|
9720
|
+
...reactComponents.shorthands.border("1px", "solid", reactComponents.tokens.colorNeutralStroke2),
|
|
9721
|
+
...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalXXL, reactComponents.tokens.spacingHorizontalXXL),
|
|
9722
|
+
boxShadow: "none"
|
|
9723
|
+
},
|
|
9724
|
+
content: {
|
|
9725
|
+
display: "flex",
|
|
9726
|
+
flexDirection: "column",
|
|
9727
|
+
gap: reactComponents.tokens.spacingVerticalL
|
|
9728
|
+
},
|
|
9729
|
+
section: {
|
|
9730
|
+
display: "flex",
|
|
9731
|
+
flexDirection: "column",
|
|
9732
|
+
gap: reactComponents.tokens.spacingVerticalS
|
|
9733
|
+
},
|
|
9734
|
+
row: {
|
|
9735
|
+
display: "flex",
|
|
9736
|
+
justifyContent: "space-between",
|
|
9737
|
+
alignItems: "center"
|
|
9738
|
+
},
|
|
9739
|
+
vehicleTitle: {
|
|
9740
|
+
fontSize: reactComponents.tokens.fontSizeBase500,
|
|
9741
|
+
fontWeight: reactComponents.tokens.fontWeightSemibold,
|
|
9742
|
+
color: reactComponents.tokens.colorNeutralForeground4
|
|
9743
|
+
},
|
|
9744
|
+
passengerDetail: {
|
|
9745
|
+
color: reactComponents.tokens.colorNeutralForeground4,
|
|
9746
|
+
fontSize: reactComponents.tokens.fontSizeBase200,
|
|
9747
|
+
marginTop: reactComponents.tokens.spacingVerticalXS
|
|
9748
|
+
},
|
|
9749
|
+
addonHeader: {
|
|
9750
|
+
fontSize: reactComponents.tokens.fontSizeBase500,
|
|
9751
|
+
fontWeight: reactComponents.tokens.fontWeightSemibold,
|
|
9752
|
+
color: reactComponents.tokens.colorNeutralForeground1,
|
|
9753
|
+
marginTop: reactComponents.tokens.spacingVerticalM
|
|
9754
|
+
},
|
|
9755
|
+
priceValue: {
|
|
9756
|
+
color: reactComponents.tokens.colorNeutralForeground4,
|
|
9757
|
+
fontSize: reactComponents.tokens.fontSizeBase300
|
|
9758
|
+
},
|
|
9759
|
+
itemLabel: {
|
|
9760
|
+
color: reactComponents.tokens.colorNeutralForeground4,
|
|
9761
|
+
fontSize: reactComponents.tokens.fontSizeBase300
|
|
9762
|
+
},
|
|
9763
|
+
totalLabel: {
|
|
9764
|
+
color: reactComponents.tokens.colorNeutralForeground4,
|
|
9765
|
+
fontSize: reactComponents.tokens.fontSizeBase400
|
|
9766
|
+
},
|
|
9767
|
+
totalValue: {
|
|
9768
|
+
color: reactComponents.tokens.colorNeutralForeground4,
|
|
9769
|
+
fontSize: reactComponents.tokens.fontSizeBase400
|
|
9770
|
+
},
|
|
9771
|
+
totalTagihanLabel: {
|
|
9772
|
+
color: reactComponents.tokens.colorNeutralForeground1,
|
|
9773
|
+
fontWeight: reactComponents.tokens.fontWeightSemibold,
|
|
9774
|
+
fontSize: reactComponents.tokens.fontSizeBase400
|
|
9775
|
+
},
|
|
9776
|
+
totalTagihanValue: {
|
|
9777
|
+
color: reactComponents.tokens.colorNeutralForeground1,
|
|
9778
|
+
fontWeight: reactComponents.tokens.fontWeightSemibold,
|
|
9779
|
+
fontSize: reactComponents.tokens.fontSizeBase400
|
|
9780
|
+
},
|
|
9781
|
+
ppnLabel: {
|
|
9782
|
+
color: reactComponents.tokens.colorNeutralForeground4,
|
|
9783
|
+
fontSize: reactComponents.tokens.fontSizeBase400
|
|
9784
|
+
},
|
|
9785
|
+
ppnValue: {
|
|
9786
|
+
color: reactComponents.tokens.colorNeutralForeground4,
|
|
9787
|
+
fontSize: reactComponents.tokens.fontSizeBase400
|
|
9788
|
+
},
|
|
9789
|
+
ppnNote: {
|
|
9790
|
+
color: reactComponents.tokens.colorNeutralForeground4,
|
|
9791
|
+
fontSize: reactComponents.tokens.fontSizeBase100,
|
|
9792
|
+
fontStyle: "italic",
|
|
9793
|
+
marginTop: reactComponents.tokens.spacingVerticalXS
|
|
9794
|
+
},
|
|
9795
|
+
grandTotalLabel: {
|
|
9796
|
+
color: "#D13438",
|
|
9797
|
+
fontSize: reactComponents.tokens.fontSizeHero700,
|
|
9798
|
+
fontWeight: reactComponents.tokens.fontWeightSemibold
|
|
9799
|
+
},
|
|
9800
|
+
grandTotalValue: {
|
|
9801
|
+
color: "#D13438",
|
|
9802
|
+
fontSize: reactComponents.tokens.fontSizeHero800,
|
|
9803
|
+
fontWeight: reactComponents.tokens.fontWeightSemibold
|
|
9804
|
+
},
|
|
9805
|
+
badge: {
|
|
9806
|
+
marginLeft: reactComponents.tokens.spacingHorizontalS,
|
|
9807
|
+
backgroundColor: "#107C10",
|
|
9808
|
+
color: "white"
|
|
9809
|
+
},
|
|
9810
|
+
divider: {
|
|
9811
|
+
margin: `${reactComponents.tokens.spacingVerticalL} 0`
|
|
9812
|
+
},
|
|
9813
|
+
closeButton: {
|
|
9814
|
+
color: reactComponents.tokens.colorNeutralForeground1
|
|
9815
|
+
}
|
|
9816
|
+
});
|
|
9817
|
+
var ModalPriceDetail = ({
|
|
9818
|
+
isOpen,
|
|
9819
|
+
onOpenChange,
|
|
9820
|
+
detailItems,
|
|
9821
|
+
addonItems,
|
|
9822
|
+
subTotal,
|
|
9823
|
+
taxAmount,
|
|
9824
|
+
grandTotal,
|
|
9825
|
+
...props
|
|
9826
|
+
}) => {
|
|
9827
|
+
const styles = useStyles37();
|
|
9828
|
+
return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Dialog, { open: isOpen, onOpenChange: (_, data) => onOpenChange(data.open), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.surface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
|
|
9829
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
9830
|
+
reactComponents.DialogTitle,
|
|
9831
|
+
{
|
|
9832
|
+
className: styles.dialogTitle,
|
|
9833
|
+
action: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTrigger, { action: "close", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
9834
|
+
reactComponents.Button,
|
|
9835
|
+
{
|
|
9836
|
+
appearance: "subtle",
|
|
9837
|
+
"aria-label": "close",
|
|
9838
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
9839
|
+
"path",
|
|
9840
|
+
{
|
|
9841
|
+
d: "M18 6L6 18M6 6L18 18",
|
|
9842
|
+
stroke: "currentColor",
|
|
9843
|
+
strokeWidth: "2",
|
|
9844
|
+
strokeLinecap: "round",
|
|
9845
|
+
strokeLinejoin: "round"
|
|
9846
|
+
}
|
|
9847
|
+
) })
|
|
9848
|
+
}
|
|
9849
|
+
) }),
|
|
9850
|
+
children: "Rincian Harga"
|
|
9851
|
+
}
|
|
9852
|
+
),
|
|
9853
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
|
|
9854
|
+
detailItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
9855
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
|
|
9856
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
|
|
9857
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.vehicleTitle, children: item.label }),
|
|
9858
|
+
item.badge && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Badge, { size: "medium", shape: "rounded", className: styles.badge, children: item.badge })
|
|
9859
|
+
] }),
|
|
9860
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.priceValue, children: [
|
|
9861
|
+
"Rp. ",
|
|
9862
|
+
item.price.toLocaleString("id-ID")
|
|
9863
|
+
] })
|
|
9864
|
+
] }),
|
|
9865
|
+
item.list && item.list.map((subItem) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.passengerDetail, children: [
|
|
9866
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: subItem.label }),
|
|
9867
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { style: { float: "right" }, children: [
|
|
9868
|
+
"IDR. ",
|
|
9869
|
+
item.price.toLocaleString("id-ID")
|
|
9870
|
+
] })
|
|
9871
|
+
] }, subItem.key))
|
|
9872
|
+
] }, item.key)),
|
|
9873
|
+
addonItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
9874
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.addonHeader, children: "Add On" }),
|
|
9875
|
+
addonItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
|
|
9876
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.itemLabel, children: item.label }),
|
|
9877
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.priceValue, children: [
|
|
9878
|
+
"IDR. ",
|
|
9879
|
+
item.price.toLocaleString("id-ID")
|
|
9880
|
+
] })
|
|
9881
|
+
] }, item.key))
|
|
9882
|
+
] }),
|
|
9883
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.divider }),
|
|
9884
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
|
|
9885
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.totalLabel, children: "Sub Tagihan" }),
|
|
9886
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.totalValue, children: [
|
|
9887
|
+
"IDR.",
|
|
9888
|
+
subTotal.toLocaleString("id-ID")
|
|
9889
|
+
] })
|
|
9890
|
+
] }),
|
|
9891
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
|
|
9892
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.totalTagihanLabel, children: "Total Tagihan" }),
|
|
9893
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.totalTagihanValue, children: [
|
|
9894
|
+
"IDR.",
|
|
9895
|
+
subTotal.toLocaleString("id-ID")
|
|
9896
|
+
] })
|
|
9897
|
+
] }),
|
|
9898
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: reactComponents.tokens.spacingVerticalL }, children: [
|
|
9899
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
|
|
9900
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.ppnLabel, children: "PPN (Pajak Pertambahan Nilai) 11%" }),
|
|
9901
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.ppnValue, children: [
|
|
9902
|
+
"IDR.",
|
|
9903
|
+
taxAmount.toLocaleString("id-ID")
|
|
9904
|
+
] })
|
|
9905
|
+
] }),
|
|
9906
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ppnNote, children: "*PPN 11% dikenakan untuk biaya layanan dan biaya admin" })
|
|
9907
|
+
] }),
|
|
9908
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, style: { marginTop: reactComponents.tokens.spacingVerticalXXL }, children: [
|
|
9909
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.grandTotalLabel, children: "Total Pembayaran" }),
|
|
9910
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.grandTotalValue, children: [
|
|
9911
|
+
"Rp.",
|
|
9912
|
+
grandTotal.toLocaleString("id-ID")
|
|
9913
|
+
] })
|
|
9914
|
+
] })
|
|
9915
|
+
] }) }) })
|
|
9916
|
+
] }) }) });
|
|
9917
|
+
};
|
|
9918
|
+
var useStyles38 = reactComponents.makeStyles({
|
|
9919
|
+
container: {
|
|
9920
|
+
display: "flex",
|
|
9921
|
+
flexDirection: "column",
|
|
9922
|
+
backgroundColor: reactComponents.tokens.colorNeutralBackground1,
|
|
9923
|
+
...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalL),
|
|
9924
|
+
...reactComponents.shorthands.border(reactComponents.tokens.strokeWidthThin, "solid", reactComponents.tokens.colorNeutralStroke1),
|
|
9925
|
+
borderRadius: reactComponents.tokens.borderRadiusXLarge,
|
|
9926
|
+
rowGap: reactComponents.tokens.spacingHorizontalXXL,
|
|
9927
|
+
width: "100%"
|
|
9928
|
+
},
|
|
9929
|
+
sectionList: {
|
|
9930
|
+
display: "flex",
|
|
9931
|
+
flexDirection: "column",
|
|
9932
|
+
rowGap: reactComponents.tokens.spacingHorizontalXXL
|
|
9933
|
+
},
|
|
9934
|
+
sectionGap: {
|
|
9935
|
+
display: "flex",
|
|
9936
|
+
flexDirection: "column",
|
|
9937
|
+
rowGap: reactComponents.tokens.spacingVerticalM
|
|
9938
|
+
},
|
|
9939
|
+
labelTab: {
|
|
9940
|
+
fontWeight: reactComponents.tokens.fontWeightMedium,
|
|
9941
|
+
paddingLeft: reactComponents.tokens.spacingHorizontalMNudge
|
|
9942
|
+
},
|
|
9943
|
+
tabItem: {
|
|
9944
|
+
'&[aria-selected="false"]': {
|
|
9945
|
+
backgroundColor: "transparent"
|
|
9946
|
+
},
|
|
9947
|
+
'&[aria-selected="true"]': {
|
|
9948
|
+
// brandColors[140] approx #EBF3FC (light blue)
|
|
9949
|
+
// brandColors[80] approx #0F6CBD (primary blue)
|
|
9950
|
+
// Using generic tokens or hardcoded fallback if brand tokens not available here
|
|
9951
|
+
backgroundColor: reactComponents.tokens.colorBrandBackground2,
|
|
9952
|
+
color: reactComponents.tokens.colorBrandForeground1
|
|
9953
|
+
},
|
|
9954
|
+
justifyContent: "flex-start"
|
|
9955
|
+
},
|
|
9956
|
+
tabItemLogout: {
|
|
9957
|
+
color: reactComponents.tokens.colorPaletteRedForeground1,
|
|
9958
|
+
backgroundColor: "transparent",
|
|
9959
|
+
justifyContent: "flex-start",
|
|
9960
|
+
"&:hover": {
|
|
9961
|
+
color: reactComponents.tokens.colorPaletteRedForeground1
|
|
9962
|
+
}
|
|
9963
|
+
}
|
|
9964
|
+
});
|
|
9965
|
+
var CardProfileMenu = ({
|
|
9966
|
+
sections,
|
|
9967
|
+
selectedValue,
|
|
9968
|
+
onTabSelect
|
|
9969
|
+
}) => {
|
|
9970
|
+
const styles = useStyles38();
|
|
9971
|
+
const handleTabSelect = (_, data) => {
|
|
9972
|
+
onTabSelect(data.value);
|
|
9973
|
+
};
|
|
9974
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.container, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
9975
|
+
reactComponents.TabList,
|
|
9976
|
+
{
|
|
9977
|
+
vertical: true,
|
|
9978
|
+
appearance: "filled-circular",
|
|
9979
|
+
selectedValue,
|
|
9980
|
+
onTabSelect: handleTabSelect,
|
|
9981
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.sectionList, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sectionGap, children: [
|
|
9982
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.labelTab, children: section.sectionLabel }) }),
|
|
9983
|
+
section.tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
9984
|
+
reactComponents.Tab,
|
|
9985
|
+
{
|
|
9986
|
+
id: tab.value,
|
|
9987
|
+
value: tab.value,
|
|
9988
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: tab.icon, width: 20, height: 20 }),
|
|
9989
|
+
className: tab.value === "/logout" ? styles.tabItemLogout : styles.tabItem,
|
|
9990
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body2, { children: tab.label })
|
|
9991
|
+
},
|
|
9992
|
+
tab.value
|
|
9993
|
+
))
|
|
9994
|
+
] }, sectionIndex)) })
|
|
9995
|
+
}
|
|
9996
|
+
) });
|
|
9997
|
+
};
|
|
9733
9998
|
|
|
9734
9999
|
exports.BackgroundTicketCard = BackgroundTicketCard_default;
|
|
9735
10000
|
exports.BackgroundTicketCardVertical = BackgroundTicketCardVertical_default;
|
|
@@ -9744,6 +10009,7 @@ exports.CardPaymentGuide = CardPaymentGuide;
|
|
|
9744
10009
|
exports.CardPaymentInfo = CardPaymentInfo;
|
|
9745
10010
|
exports.CardPaymentMethodList = CardPaymentMethodList;
|
|
9746
10011
|
exports.CardPriceDetails = CardPriceDetails;
|
|
10012
|
+
exports.CardProfileMenu = CardProfileMenu;
|
|
9747
10013
|
exports.CardPromo = CardPromo;
|
|
9748
10014
|
exports.CardReview = CardReview;
|
|
9749
10015
|
exports.CardReviewPassenger = CardReviewPassenger;
|
|
@@ -9775,13 +10041,13 @@ exports.ModalFilterTicketDefaultLabels = DEFAULT_LABELS3;
|
|
|
9775
10041
|
exports.ModalIllustration = ModalIllustration;
|
|
9776
10042
|
exports.ModalListPassenger = ModalListPassenger;
|
|
9777
10043
|
exports.ModalPassengerForm = ModalPassengerForm;
|
|
10044
|
+
exports.ModalPriceDetail = ModalPriceDetail;
|
|
9778
10045
|
exports.ModalSearchHarbor = ModalSearchHarbor;
|
|
9779
10046
|
exports.ModalSearchTicket = ModalSearchTicket;
|
|
9780
10047
|
exports.ModalSelectDate = ModalSelectDate;
|
|
9781
10048
|
exports.ModalService = ModalService;
|
|
9782
10049
|
exports.ModalTotalPassengers = ModalTotalPassengers;
|
|
9783
10050
|
exports.ModalTypeOfService = ModalTypeOfService;
|
|
9784
|
-
exports.PriceDetailsTerms = PriceDetailsTerms;
|
|
9785
10051
|
exports.SortMenu = SortMenu;
|
|
9786
10052
|
exports.Stepper = Stepper;
|
|
9787
10053
|
exports.getBadgeConfig = getBadgeConfig;
|