@asdp/ferryui 0.1.22-dev.9111 → 0.1.22-dev.9117
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 +33 -1
- package/dist/index.d.ts +33 -1
- package/dist/index.js +142 -92
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +65 -17
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var reactComponents = require('@fluentui/react-components');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var
|
|
5
|
+
var React = require('react');
|
|
6
6
|
var reactIcons = require('@fluentui/react-icons');
|
|
7
7
|
var reactGridSystem = require('react-grid-system');
|
|
8
8
|
var react = require('@iconify/react');
|
|
@@ -15,7 +15,7 @@ var reactRange = require('react-range');
|
|
|
15
15
|
|
|
16
16
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
19
19
|
var PhoneInputComponent__default = /*#__PURE__*/_interopDefault(PhoneInputComponent);
|
|
20
20
|
var Select__default = /*#__PURE__*/_interopDefault(Select);
|
|
21
21
|
var moment__default = /*#__PURE__*/_interopDefault(moment);
|
|
@@ -466,6 +466,26 @@ var GENDER = {
|
|
|
466
466
|
MALE: "M",
|
|
467
467
|
FEMALE: "F"
|
|
468
468
|
};
|
|
469
|
+
var MY_TICKET_TAB = {
|
|
470
|
+
WAITING: 1,
|
|
471
|
+
ACTIVE: 2,
|
|
472
|
+
COMPLETED: 3,
|
|
473
|
+
FAILED: 4,
|
|
474
|
+
RETURNED: 5
|
|
475
|
+
};
|
|
476
|
+
var MY_TICKET_STATUS = {
|
|
477
|
+
DRAFT: 1,
|
|
478
|
+
NOT_YET_PAID: 2,
|
|
479
|
+
PAID: 3,
|
|
480
|
+
CHECKIN: 4,
|
|
481
|
+
BOARDING: 5,
|
|
482
|
+
NEED_ACTION: 6,
|
|
483
|
+
COMPLETED: 7,
|
|
484
|
+
EXPIRED_CHECKIN: 8,
|
|
485
|
+
EXPIRED_PAYMENT: 9,
|
|
486
|
+
EXPIRED_BOARDING: 10,
|
|
487
|
+
REFUND: 11
|
|
488
|
+
};
|
|
469
489
|
var useStyles2 = reactComponents.makeStyles({
|
|
470
490
|
carousel: {},
|
|
471
491
|
carouselContainer: {
|
|
@@ -587,11 +607,13 @@ var CarouselWithCustomNav = ({
|
|
|
587
607
|
cardFocus = false,
|
|
588
608
|
showNavButtons = false,
|
|
589
609
|
showCloseButton = false,
|
|
590
|
-
onCloseClick
|
|
610
|
+
onCloseClick,
|
|
611
|
+
autoPlay = false,
|
|
612
|
+
autoPlayInterval = 5e3
|
|
591
613
|
}) => {
|
|
592
614
|
const styles = useStyles2();
|
|
593
|
-
const [internalIndex, setInternalIndex] =
|
|
594
|
-
const labels =
|
|
615
|
+
const [internalIndex, setInternalIndex] = React.useState(0);
|
|
616
|
+
const labels = React__default.default.useMemo(
|
|
595
617
|
() => ({
|
|
596
618
|
...DEFAULT_LABELS2[language],
|
|
597
619
|
...customLabels,
|
|
@@ -600,7 +622,7 @@ var CarouselWithCustomNav = ({
|
|
|
600
622
|
[language, customLabels, deprecatedAriaLabel]
|
|
601
623
|
);
|
|
602
624
|
const activeIndex = controlledIndex !== void 0 ? controlledIndex : internalIndex;
|
|
603
|
-
const handleIndexChange =
|
|
625
|
+
const handleIndexChange = React.useCallback(
|
|
604
626
|
(index) => {
|
|
605
627
|
if (controlledIndex === void 0) {
|
|
606
628
|
setInternalIndex(index);
|
|
@@ -609,7 +631,33 @@ var CarouselWithCustomNav = ({
|
|
|
609
631
|
},
|
|
610
632
|
[controlledIndex, onActiveIndexChange]
|
|
611
633
|
);
|
|
612
|
-
|
|
634
|
+
React__default.default.useEffect(() => {
|
|
635
|
+
if (!autoPlay) return;
|
|
636
|
+
const totalSlides = React__default.default.Children.count(children);
|
|
637
|
+
if (totalSlides <= 1) return;
|
|
638
|
+
const intervalId = setInterval(() => {
|
|
639
|
+
let nextIndex = activeIndex + 1;
|
|
640
|
+
if (nextIndex >= totalSlides) {
|
|
641
|
+
nextIndex = circular ? 0 : activeIndex;
|
|
642
|
+
}
|
|
643
|
+
if (nextIndex !== activeIndex) {
|
|
644
|
+
if (controlledIndex === void 0) {
|
|
645
|
+
setInternalIndex(nextIndex);
|
|
646
|
+
}
|
|
647
|
+
onActiveIndexChange?.(nextIndex);
|
|
648
|
+
}
|
|
649
|
+
}, autoPlayInterval);
|
|
650
|
+
return () => clearInterval(intervalId);
|
|
651
|
+
}, [
|
|
652
|
+
autoPlay,
|
|
653
|
+
autoPlayInterval,
|
|
654
|
+
children,
|
|
655
|
+
circular,
|
|
656
|
+
activeIndex,
|
|
657
|
+
controlledIndex,
|
|
658
|
+
onActiveIndexChange
|
|
659
|
+
]);
|
|
660
|
+
const defaultAnnouncement = React.useCallback(
|
|
613
661
|
(index, totalSlides) => {
|
|
614
662
|
return labels.announcementTemplate.replace("{index}", (index + 1).toString()).replace("{total}", totalSlides.toString());
|
|
615
663
|
},
|
|
@@ -946,12 +994,12 @@ var useStyles4 = reactComponents.makeStyles({
|
|
|
946
994
|
padding: 0,
|
|
947
995
|
backgroundColor: "transparent",
|
|
948
996
|
border: "none",
|
|
949
|
-
|
|
997
|
+
aspectRatio: "3/1",
|
|
950
998
|
borderRadius: reactComponents.tokens.borderRadiusXLarge
|
|
951
999
|
},
|
|
952
1000
|
bannerImage: {
|
|
953
1001
|
width: "100%",
|
|
954
|
-
|
|
1002
|
+
aspectRatio: "3/1",
|
|
955
1003
|
objectFit: "cover",
|
|
956
1004
|
display: "block",
|
|
957
1005
|
cursor: "pointer",
|
|
@@ -1010,11 +1058,11 @@ var CardBanner = ({
|
|
|
1010
1058
|
) });
|
|
1011
1059
|
};
|
|
1012
1060
|
function useWindowSize() {
|
|
1013
|
-
const [windowSize, setWindowSize] =
|
|
1061
|
+
const [windowSize, setWindowSize] = React.useState({
|
|
1014
1062
|
width: 0,
|
|
1015
1063
|
height: 0
|
|
1016
1064
|
});
|
|
1017
|
-
|
|
1065
|
+
React.useEffect(() => {
|
|
1018
1066
|
function handleResize() {
|
|
1019
1067
|
setWindowSize({
|
|
1020
1068
|
width: window.innerWidth,
|
|
@@ -1950,7 +1998,7 @@ var CardServiceMenu = ({
|
|
|
1950
1998
|
return reactComponents.mergeClasses(styles.menuItem, isActive && styles.menuItemActive);
|
|
1951
1999
|
};
|
|
1952
2000
|
return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: reactComponents.mergeClasses(styles.card, className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.menuList, children: menuItems.map((item, index) => {
|
|
1953
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2001
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
|
|
1954
2002
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1955
2003
|
reactComponents.Button,
|
|
1956
2004
|
{
|
|
@@ -1987,9 +2035,9 @@ var CardServiceMenu = ({
|
|
|
1987
2035
|
}) }) });
|
|
1988
2036
|
};
|
|
1989
2037
|
function useIsClamped(deps) {
|
|
1990
|
-
const ref =
|
|
1991
|
-
const [isClamped, setIsClamped] =
|
|
1992
|
-
|
|
2038
|
+
const ref = React.useRef(null);
|
|
2039
|
+
const [isClamped, setIsClamped] = React.useState(false);
|
|
2040
|
+
React.useEffect(() => {
|
|
1993
2041
|
const el = ref.current;
|
|
1994
2042
|
if (!el) return;
|
|
1995
2043
|
const check = () => setIsClamped(el.scrollHeight > el.clientHeight);
|
|
@@ -2020,7 +2068,7 @@ var MenuItemDescription = ({ description, className }) => {
|
|
|
2020
2068
|
}
|
|
2021
2069
|
return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className, children: description });
|
|
2022
2070
|
};
|
|
2023
|
-
var DatePickerInput =
|
|
2071
|
+
var DatePickerInput = React.forwardRef(
|
|
2024
2072
|
({
|
|
2025
2073
|
field,
|
|
2026
2074
|
placeholder,
|
|
@@ -2033,7 +2081,7 @@ var DatePickerInput = React5.forwardRef(
|
|
|
2033
2081
|
max,
|
|
2034
2082
|
...restProps
|
|
2035
2083
|
}, ref) => {
|
|
2036
|
-
const [isOpen, setIsOpen] =
|
|
2084
|
+
const [isOpen, setIsOpen] = React.useState(false);
|
|
2037
2085
|
const dateValue = field.value ? new Date(field.value) : void 0;
|
|
2038
2086
|
const onSelectDate = (date) => {
|
|
2039
2087
|
if (date) {
|
|
@@ -2556,19 +2604,19 @@ var InputDynamic = ({
|
|
|
2556
2604
|
}) => {
|
|
2557
2605
|
const styles = useStyles7();
|
|
2558
2606
|
const mergedLabels = { ...DEFAULT_LABELS7[language], ...labels };
|
|
2559
|
-
const [showPassword, setShowPassword] =
|
|
2560
|
-
const [isPhoneMode, setIsPhoneMode] =
|
|
2561
|
-
const [emailOrPhoneType, setEmailOrPhoneType] =
|
|
2562
|
-
const [identityType, setIdentityType] =
|
|
2607
|
+
const [showPassword, setShowPassword] = React.useState(false);
|
|
2608
|
+
const [isPhoneMode, setIsPhoneMode] = React.useState(false);
|
|
2609
|
+
const [emailOrPhoneType, setEmailOrPhoneType] = React.useState("none");
|
|
2610
|
+
const [identityType, setIdentityType] = React.useState(
|
|
2563
2611
|
"id"
|
|
2564
2612
|
);
|
|
2565
|
-
const [lastPhoneValue, setLastPhoneValue] =
|
|
2566
|
-
const [lastEmailOrPhoneValue, setLastEmailOrPhoneValue] =
|
|
2567
|
-
const inputRef =
|
|
2568
|
-
const phoneInputRef =
|
|
2569
|
-
const emailOrPhoneInputRef =
|
|
2570
|
-
const shouldFocusRef =
|
|
2571
|
-
const isBackspaceNavigationRef =
|
|
2613
|
+
const [lastPhoneValue, setLastPhoneValue] = React.useState("");
|
|
2614
|
+
const [lastEmailOrPhoneValue, setLastEmailOrPhoneValue] = React.useState("");
|
|
2615
|
+
const inputRef = React.useRef(null);
|
|
2616
|
+
const phoneInputRef = React.useRef(null);
|
|
2617
|
+
const emailOrPhoneInputRef = React.useRef(null);
|
|
2618
|
+
const shouldFocusRef = React.useRef(false);
|
|
2619
|
+
const isBackspaceNavigationRef = React.useRef(false);
|
|
2572
2620
|
const getSelectStyles = (hasError2, selectAppearance) => {
|
|
2573
2621
|
const currentAppearance = appearance || "outline";
|
|
2574
2622
|
const getControlStyles = (provided, state) => {
|
|
@@ -2688,7 +2736,7 @@ var InputDynamic = ({
|
|
|
2688
2736
|
})
|
|
2689
2737
|
};
|
|
2690
2738
|
};
|
|
2691
|
-
|
|
2739
|
+
React.useEffect(() => {
|
|
2692
2740
|
if (shouldFocusRef.current) {
|
|
2693
2741
|
setTimeout(() => {
|
|
2694
2742
|
if (identityType === "phone" && phoneInputRef.current) {
|
|
@@ -2710,7 +2758,7 @@ var InputDynamic = ({
|
|
|
2710
2758
|
}, 50);
|
|
2711
2759
|
}
|
|
2712
2760
|
}, [identityType]);
|
|
2713
|
-
|
|
2761
|
+
React.useEffect(() => {
|
|
2714
2762
|
if (shouldFocusRef.current && type === "emailOrPhone") {
|
|
2715
2763
|
setTimeout(() => {
|
|
2716
2764
|
if (emailOrPhoneType === "phone" && emailOrPhoneInputRef.current) {
|
|
@@ -3746,7 +3794,7 @@ var CardTicketSearch = ({
|
|
|
3746
3794
|
menuItems
|
|
3747
3795
|
}) => {
|
|
3748
3796
|
const styles = useStyles8();
|
|
3749
|
-
const labels =
|
|
3797
|
+
const labels = React__default.default.useMemo(
|
|
3750
3798
|
() => ({ ...DEFAULT_LABELS8[language], ...customLabels }),
|
|
3751
3799
|
[language, customLabels]
|
|
3752
3800
|
);
|
|
@@ -3767,7 +3815,7 @@ var CardTicketSearch = ({
|
|
|
3767
3815
|
name: "roundTrip",
|
|
3768
3816
|
defaultValue: roundTrip
|
|
3769
3817
|
});
|
|
3770
|
-
|
|
3818
|
+
React__default.default.useEffect(() => {
|
|
3771
3819
|
setValue("from", from);
|
|
3772
3820
|
setValue("to", to);
|
|
3773
3821
|
setValue("startDate", startDate);
|
|
@@ -3787,7 +3835,7 @@ var CardTicketSearch = ({
|
|
|
3787
3835
|
passenger,
|
|
3788
3836
|
setValue
|
|
3789
3837
|
]);
|
|
3790
|
-
|
|
3838
|
+
React__default.default.useEffect(() => {
|
|
3791
3839
|
if (onRoundTripChange) {
|
|
3792
3840
|
onRoundTripChange(roundTripValue);
|
|
3793
3841
|
}
|
|
@@ -5105,18 +5153,18 @@ var ModalSelectDate = ({
|
|
|
5105
5153
|
}) => {
|
|
5106
5154
|
const styles = useStyles11();
|
|
5107
5155
|
const mergedLabels = { ...DEFAULT_LABELS11[language], ...labels };
|
|
5108
|
-
|
|
5156
|
+
React.useEffect(() => {
|
|
5109
5157
|
moment__default.default.locale(language === "id" ? "id" : "en");
|
|
5110
5158
|
}, [language]);
|
|
5111
|
-
const [selectedDate, setSelectedDate] =
|
|
5159
|
+
const [selectedDate, setSelectedDate] = React.useState(
|
|
5112
5160
|
selectedDepartureDate
|
|
5113
5161
|
);
|
|
5114
|
-
const [selectedEndDate, setSelectedEndDate] =
|
|
5162
|
+
const [selectedEndDate, setSelectedEndDate] = React.useState(
|
|
5115
5163
|
selectedReturnDate
|
|
5116
5164
|
);
|
|
5117
|
-
const [hoveredDate, setHoveredDate] =
|
|
5118
|
-
const [activeTab, setActiveTab] =
|
|
5119
|
-
const previewEndDate =
|
|
5165
|
+
const [hoveredDate, setHoveredDate] = React.useState();
|
|
5166
|
+
const [activeTab, setActiveTab] = React.useState(initialTab);
|
|
5167
|
+
const previewEndDate = React.useMemo(() => {
|
|
5120
5168
|
if (selectedEndDate) return selectedEndDate;
|
|
5121
5169
|
if (selectedDate && hoveredDate && hoveredDate > selectedDate) {
|
|
5122
5170
|
return hoveredDate;
|
|
@@ -5127,7 +5175,7 @@ var ModalSelectDate = ({
|
|
|
5127
5175
|
if (!first || !second) return false;
|
|
5128
5176
|
return moment__default.default(first).isSame(second, "day");
|
|
5129
5177
|
};
|
|
5130
|
-
|
|
5178
|
+
React.useEffect(() => {
|
|
5131
5179
|
if (open) {
|
|
5132
5180
|
setSelectedDate(selectedDepartureDate);
|
|
5133
5181
|
setSelectedEndDate(selectedReturnDate);
|
|
@@ -5179,7 +5227,7 @@ var ModalSelectDate = ({
|
|
|
5179
5227
|
handleClose();
|
|
5180
5228
|
}
|
|
5181
5229
|
};
|
|
5182
|
-
const handleCustomDayCellRef =
|
|
5230
|
+
const handleCustomDayCellRef = React.useCallback(
|
|
5183
5231
|
(element, date, _classNames) => {
|
|
5184
5232
|
if (!element) return;
|
|
5185
5233
|
const removeTokens = (className) => {
|
|
@@ -5433,8 +5481,8 @@ var ModalService = ({
|
|
|
5433
5481
|
const styles = useStyles12();
|
|
5434
5482
|
const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
|
|
5435
5483
|
const displayTitle = title || mergedLabels.title;
|
|
5436
|
-
const [selectedServices, setSelectedServices] =
|
|
5437
|
-
|
|
5484
|
+
const [selectedServices, setSelectedServices] = React.useState(selectedServiceIds);
|
|
5485
|
+
React.useEffect(() => {
|
|
5438
5486
|
if (open) {
|
|
5439
5487
|
if (selectedServiceIds && selectedServiceIds.length > 0) {
|
|
5440
5488
|
const validIds = services.filter((s) => selectedServiceIds.includes(s.serviceTypeId)).map((s) => s.serviceTypeId);
|
|
@@ -5634,13 +5682,13 @@ var ModalTotalPassengers = ({
|
|
|
5634
5682
|
}) => {
|
|
5635
5683
|
const styles = useStyles13();
|
|
5636
5684
|
const mergedLabels = { ...DEFAULT_LABELS13[language], ...labels };
|
|
5637
|
-
const [passengers, setPassengers] =
|
|
5638
|
-
const [openItems, setOpenItems] =
|
|
5685
|
+
const [passengers, setPassengers] = React.useState([]);
|
|
5686
|
+
const [openItems, setOpenItems] = React.useState([]);
|
|
5639
5687
|
const defaultInfoMessage = mergedLabels.infoMessage.replace(
|
|
5640
5688
|
"{maxPassengers}",
|
|
5641
5689
|
String(maxPassengers)
|
|
5642
5690
|
);
|
|
5643
|
-
|
|
5691
|
+
React.useEffect(() => {
|
|
5644
5692
|
if (passengerTypes.length === 0) return;
|
|
5645
5693
|
const defaultPassengers = passengerTypes.map(
|
|
5646
5694
|
(passengerType) => ({
|
|
@@ -5985,10 +6033,10 @@ var ModalTypeOfService = ({
|
|
|
5985
6033
|
}) => {
|
|
5986
6034
|
const styles = useStyles14();
|
|
5987
6035
|
const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
|
|
5988
|
-
const [selectedServiceId, setSelectedServiceId] =
|
|
6036
|
+
const [selectedServiceId, setSelectedServiceId] = React.useState(
|
|
5989
6037
|
selectedService?.id || 0
|
|
5990
6038
|
);
|
|
5991
|
-
const [openItems, setOpenItems] =
|
|
6039
|
+
const [openItems, setOpenItems] = React.useState(() => {
|
|
5992
6040
|
if (!selectedService) return [];
|
|
5993
6041
|
for (const item of serviceTypes) {
|
|
5994
6042
|
if (item.children && item.children.length > 0) {
|
|
@@ -6018,7 +6066,7 @@ var ModalTypeOfService = ({
|
|
|
6018
6066
|
}
|
|
6019
6067
|
);
|
|
6020
6068
|
const imageRenderer = renderImage || defaultRenderImage;
|
|
6021
|
-
|
|
6069
|
+
React.useEffect(() => {
|
|
6022
6070
|
const newId = selectedService?.id || 0;
|
|
6023
6071
|
if (newId !== selectedServiceId) {
|
|
6024
6072
|
setSelectedServiceId(newId);
|
|
@@ -6301,7 +6349,7 @@ var SortMenu = ({
|
|
|
6301
6349
|
clearFiltersText: deprecatedClearFiltersText
|
|
6302
6350
|
}) => {
|
|
6303
6351
|
const styles = useStyles15();
|
|
6304
|
-
const labels =
|
|
6352
|
+
const labels = React__default.default.useMemo(
|
|
6305
6353
|
() => ({
|
|
6306
6354
|
...DEFAULT_LABELS15[language],
|
|
6307
6355
|
...customLabels,
|
|
@@ -6324,11 +6372,11 @@ var SortMenu = ({
|
|
|
6324
6372
|
deprecatedClearFiltersText
|
|
6325
6373
|
]
|
|
6326
6374
|
);
|
|
6327
|
-
const sortOptions =
|
|
6375
|
+
const sortOptions = React__default.default.useMemo(
|
|
6328
6376
|
() => customSortOptions || getSortOptions(labels),
|
|
6329
6377
|
[customSortOptions, labels]
|
|
6330
6378
|
);
|
|
6331
|
-
const currentSortLabel =
|
|
6379
|
+
const currentSortLabel = React__default.default.useMemo(
|
|
6332
6380
|
() => sortOptions.find((opt) => opt.value === value)?.label || labels.recommendation,
|
|
6333
6381
|
[sortOptions, value, labels.recommendation]
|
|
6334
6382
|
);
|
|
@@ -6587,8 +6635,8 @@ var ModalFilterTicket = ({
|
|
|
6587
6635
|
}) => {
|
|
6588
6636
|
const styles = useStyles16();
|
|
6589
6637
|
const mergedLabels = { ...DEFAULT_LABELS16[language], ...labels };
|
|
6590
|
-
const [rangeReady, setRangeReady] =
|
|
6591
|
-
|
|
6638
|
+
const [rangeReady, setRangeReady] = React.useState(false);
|
|
6639
|
+
React.useEffect(() => {
|
|
6592
6640
|
if (open) {
|
|
6593
6641
|
const timer = setTimeout(() => {
|
|
6594
6642
|
setRangeReady(true);
|
|
@@ -6625,7 +6673,7 @@ var ModalFilterTicket = ({
|
|
|
6625
6673
|
price
|
|
6626
6674
|
);
|
|
6627
6675
|
};
|
|
6628
|
-
const renderPriceTrack =
|
|
6676
|
+
const renderPriceTrack = React.useCallback(
|
|
6629
6677
|
({ props, children }) => {
|
|
6630
6678
|
const [value1, value2] = priceRange;
|
|
6631
6679
|
const percent1 = (value1 - minPrice) / (maxPrice - minPrice) * 100;
|
|
@@ -6664,7 +6712,7 @@ var ModalFilterTicket = ({
|
|
|
6664
6712
|
},
|
|
6665
6713
|
[priceRange, minPrice, maxPrice]
|
|
6666
6714
|
);
|
|
6667
|
-
const renderDurationTrack =
|
|
6715
|
+
const renderDurationTrack = React.useCallback(
|
|
6668
6716
|
({ props, children }) => {
|
|
6669
6717
|
const [value1, value2] = durationRange;
|
|
6670
6718
|
const percent1 = (value1 - minDuration) / (maxDuration - minDuration) * 100;
|
|
@@ -6992,7 +7040,7 @@ var DateFilter = ({
|
|
|
6992
7040
|
labels
|
|
6993
7041
|
}) => {
|
|
6994
7042
|
const styles = useStyles17();
|
|
6995
|
-
const scrollRef =
|
|
7043
|
+
const scrollRef = React.useRef(null);
|
|
6996
7044
|
const mergedLabels = {
|
|
6997
7045
|
...DEFAULT_LABELS17[language],
|
|
6998
7046
|
...labels
|
|
@@ -7229,8 +7277,8 @@ var ModalSearchTicket = ({
|
|
|
7229
7277
|
name: "roundTrip",
|
|
7230
7278
|
defaultValue: defaultValues?.roundTrip || false
|
|
7231
7279
|
});
|
|
7232
|
-
const isUpdatingFromProps =
|
|
7233
|
-
|
|
7280
|
+
const isUpdatingFromProps = React.useRef(false);
|
|
7281
|
+
React.useEffect(() => {
|
|
7234
7282
|
if (defaultValues) {
|
|
7235
7283
|
isUpdatingFromProps.current = true;
|
|
7236
7284
|
Object.entries(defaultValues).forEach(([key, value]) => {
|
|
@@ -7241,7 +7289,7 @@ var ModalSearchTicket = ({
|
|
|
7241
7289
|
}, 0);
|
|
7242
7290
|
}
|
|
7243
7291
|
}, [defaultValues, setValue]);
|
|
7244
|
-
|
|
7292
|
+
React.useEffect(() => {
|
|
7245
7293
|
if (onRoundTripChange && !isUpdatingFromProps.current) {
|
|
7246
7294
|
onRoundTripChange(roundTripValue);
|
|
7247
7295
|
}
|
|
@@ -7791,13 +7839,13 @@ var Stepper = ({
|
|
|
7791
7839
|
}) => {
|
|
7792
7840
|
const styles = useStyles19();
|
|
7793
7841
|
const mergedLabels = { ...DEFAULT_LABELS19[language], ...labels };
|
|
7794
|
-
const currentStepIndex =
|
|
7842
|
+
const currentStepIndex = React.useMemo(() => {
|
|
7795
7843
|
if (typeof currentStep === "number") {
|
|
7796
7844
|
return steps.findIndex((step) => step.number === currentStep);
|
|
7797
7845
|
}
|
|
7798
7846
|
return steps.findIndex((step) => step.id === currentStep);
|
|
7799
7847
|
}, [steps, currentStep]);
|
|
7800
|
-
const activeStepNumber =
|
|
7848
|
+
const activeStepNumber = React.useMemo(() => {
|
|
7801
7849
|
return currentStepIndex >= 0 ? steps[currentStepIndex].number : 1;
|
|
7802
7850
|
}, [currentStepIndex, steps]);
|
|
7803
7851
|
const getStepStatus = (stepNumber) => {
|
|
@@ -7828,7 +7876,7 @@ var Stepper = ({
|
|
|
7828
7876
|
className: styles.stepperBackground
|
|
7829
7877
|
}
|
|
7830
7878
|
),
|
|
7831
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.stepsRow, children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7879
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.stepsRow, children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
|
|
7832
7880
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.stepCircleWrapper, children: [
|
|
7833
7881
|
getStepStatus(step.number) === "active" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
7834
7882
|
"img",
|
|
@@ -8439,28 +8487,28 @@ var ModalPassengerForm = ({
|
|
|
8439
8487
|
};
|
|
8440
8488
|
const displayTitle = title || mergedLabels.title;
|
|
8441
8489
|
const idTypes = ["KTP", "SIM", "Paspor"];
|
|
8442
|
-
const [isModalSelectIdTypeOpen, setIsModalSelectIdTypeOpen] =
|
|
8443
|
-
const [isModalScanOpen, setIsModalScanOpen] =
|
|
8444
|
-
const [scannedIdType, setScannedIdType] =
|
|
8445
|
-
const [scanStatus, setScanStatus] =
|
|
8446
|
-
const [scanStep, setScanStep] =
|
|
8447
|
-
const [capturedImage, setCapturedImage] =
|
|
8448
|
-
const [stream, setStream] =
|
|
8449
|
-
const videoRef =
|
|
8490
|
+
const [isModalSelectIdTypeOpen, setIsModalSelectIdTypeOpen] = React.useState(false);
|
|
8491
|
+
const [isModalScanOpen, setIsModalScanOpen] = React.useState(false);
|
|
8492
|
+
const [scannedIdType, setScannedIdType] = React.useState(null);
|
|
8493
|
+
const [scanStatus, setScanStatus] = React.useState("idle");
|
|
8494
|
+
const [scanStep, setScanStep] = React.useState(0);
|
|
8495
|
+
const [capturedImage, setCapturedImage] = React.useState(null);
|
|
8496
|
+
const [stream, setStream] = React.useState(null);
|
|
8497
|
+
const videoRef = React.useRef(null);
|
|
8450
8498
|
const { control, handleSubmit, reset, watch, setValue } = reactHookForm.useForm({
|
|
8451
8499
|
defaultValues
|
|
8452
8500
|
});
|
|
8453
8501
|
const idType = watch("idType");
|
|
8454
8502
|
const watchPassportCountry = watch("country");
|
|
8455
|
-
|
|
8503
|
+
React.useEffect(() => {
|
|
8456
8504
|
reset(defaultValues);
|
|
8457
8505
|
}, [defaultValues, reset]);
|
|
8458
|
-
|
|
8506
|
+
React.useEffect(() => {
|
|
8459
8507
|
if (idType) {
|
|
8460
8508
|
setValue("idNumber", "");
|
|
8461
8509
|
}
|
|
8462
8510
|
}, [idType, watchPassportCountry, setValue]);
|
|
8463
|
-
const stopCamera =
|
|
8511
|
+
const stopCamera = React.useCallback(() => {
|
|
8464
8512
|
if (stream) {
|
|
8465
8513
|
stream.getTracks().forEach((track) => track.stop());
|
|
8466
8514
|
setStream(null);
|
|
@@ -8470,7 +8518,7 @@ var ModalPassengerForm = ({
|
|
|
8470
8518
|
videoRef.current.srcObject = null;
|
|
8471
8519
|
}
|
|
8472
8520
|
}, [stream]);
|
|
8473
|
-
const startCamera =
|
|
8521
|
+
const startCamera = React.useCallback(async () => {
|
|
8474
8522
|
try {
|
|
8475
8523
|
const mediaStream = await navigator.mediaDevices.getUserMedia({
|
|
8476
8524
|
video: {
|
|
@@ -8485,7 +8533,7 @@ var ModalPassengerForm = ({
|
|
|
8485
8533
|
alert(mergedLabels.cameraPermissionError);
|
|
8486
8534
|
}
|
|
8487
8535
|
}, [mergedLabels.cameraPermissionError]);
|
|
8488
|
-
const capturePhoto =
|
|
8536
|
+
const capturePhoto = React.useCallback(() => {
|
|
8489
8537
|
if (videoRef.current) {
|
|
8490
8538
|
const canvas = document.createElement("canvas");
|
|
8491
8539
|
canvas.width = videoRef.current.videoWidth;
|
|
@@ -8503,12 +8551,12 @@ var ModalPassengerForm = ({
|
|
|
8503
8551
|
}
|
|
8504
8552
|
}
|
|
8505
8553
|
}, [scannedIdType, stopCamera]);
|
|
8506
|
-
|
|
8554
|
+
React.useEffect(() => {
|
|
8507
8555
|
if (isModalScanOpen && scanStatus === "idle") {
|
|
8508
8556
|
startCamera();
|
|
8509
8557
|
}
|
|
8510
8558
|
}, [isModalScanOpen, scanStatus, startCamera]);
|
|
8511
|
-
|
|
8559
|
+
React.useEffect(() => {
|
|
8512
8560
|
if (isModalScanOpen && scanStatus === "idle" && stream && videoRef.current) {
|
|
8513
8561
|
if (videoRef.current.srcObject !== stream) {
|
|
8514
8562
|
videoRef.current.srcObject = stream;
|
|
@@ -8523,18 +8571,18 @@ var ModalPassengerForm = ({
|
|
|
8523
8571
|
}
|
|
8524
8572
|
}
|
|
8525
8573
|
}, [isModalScanOpen, scanStatus, stream]);
|
|
8526
|
-
|
|
8574
|
+
React.useEffect(() => {
|
|
8527
8575
|
if (!isModalScanOpen) {
|
|
8528
8576
|
stopCamera();
|
|
8529
8577
|
setScanStep(0);
|
|
8530
8578
|
}
|
|
8531
8579
|
}, [isModalScanOpen, stopCamera]);
|
|
8532
|
-
|
|
8580
|
+
React.useEffect(() => {
|
|
8533
8581
|
return () => {
|
|
8534
8582
|
stopCamera();
|
|
8535
8583
|
};
|
|
8536
8584
|
}, [stopCamera]);
|
|
8537
|
-
|
|
8585
|
+
React.useEffect(() => {
|
|
8538
8586
|
if (scanStatus !== "reading" || !capturedImage) return;
|
|
8539
8587
|
let isCancelled = false;
|
|
8540
8588
|
const performOCR = async () => {
|
|
@@ -11587,7 +11635,7 @@ var CardReview = ({
|
|
|
11587
11635
|
}
|
|
11588
11636
|
) : (
|
|
11589
11637
|
// Clone element to append className if it's a valid React element
|
|
11590
|
-
|
|
11638
|
+
React__default.default.isValidElement(item.label) ? React__default.default.cloneElement(item.label, {
|
|
11591
11639
|
className: `${styles.defaultLabel} ${item.labelClassName || ""}${item.label.props.className ? " " + item.label.props.className : ""}`
|
|
11592
11640
|
}) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
11593
11641
|
"div",
|
|
@@ -11940,7 +11988,7 @@ var CardPriceDetails = ({
|
|
|
11940
11988
|
const renderItem = (item, key) => {
|
|
11941
11989
|
const variantClass = getVariantClass(item.variant);
|
|
11942
11990
|
const isTaxLike = item.variant === "danger";
|
|
11943
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11991
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
|
|
11944
11992
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
|
|
11945
11993
|
isTaxLike ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { className: variantClass, children: item.name }) : /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: reactComponents.mergeClasses(styles.label, variantClass), children: item.name }),
|
|
11946
11994
|
isTaxLike ? /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Strong, { className: reactComponents.mergeClasses(styles.value, variantClass), children: [
|
|
@@ -11967,7 +12015,7 @@ var CardPriceDetails = ({
|
|
|
11967
12015
|
section.detail.map((item, i) => renderItem(item, i))
|
|
11968
12016
|
] }, index);
|
|
11969
12017
|
}
|
|
11970
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
12018
|
+
return /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: section.detail.map((item, i) => renderItem(item, i)) }, index);
|
|
11971
12019
|
}),
|
|
11972
12020
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
|
|
11973
12021
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.totalRow, children: [
|
|
@@ -12961,7 +13009,7 @@ var uploadStyles = reactComponents.makeStyles({
|
|
|
12961
13009
|
objectFit: "contain"
|
|
12962
13010
|
}
|
|
12963
13011
|
});
|
|
12964
|
-
var FileUpload =
|
|
13012
|
+
var FileUpload = React__default.default.forwardRef(
|
|
12965
13013
|
({
|
|
12966
13014
|
name,
|
|
12967
13015
|
control,
|
|
@@ -12977,12 +13025,12 @@ var FileUpload = React5__default.default.forwardRef(
|
|
|
12977
13025
|
}, ref) => {
|
|
12978
13026
|
const mergedLabels = { ...DEFAULT_LABELS38[language], ...customLabels };
|
|
12979
13027
|
const styles = uploadStyles();
|
|
12980
|
-
const fileInputRef =
|
|
12981
|
-
const [, setIsDragOver] =
|
|
12982
|
-
const [previewUrl, setPreviewUrl] =
|
|
12983
|
-
const [sizeError, setSizeError] =
|
|
12984
|
-
const [currentFile, setCurrentFile] =
|
|
12985
|
-
const [isPreviewOpen, setIsPreviewOpen] =
|
|
13028
|
+
const fileInputRef = React.useRef(null);
|
|
13029
|
+
const [, setIsDragOver] = React.useState(false);
|
|
13030
|
+
const [previewUrl, setPreviewUrl] = React.useState(null);
|
|
13031
|
+
const [sizeError, setSizeError] = React.useState(null);
|
|
13032
|
+
const [currentFile, setCurrentFile] = React.useState(null);
|
|
13033
|
+
const [isPreviewOpen, setIsPreviewOpen] = React.useState(false);
|
|
12986
13034
|
const formatFileSize = (bytes) => {
|
|
12987
13035
|
if (bytes < 1024) return `${bytes} B`;
|
|
12988
13036
|
const kb = bytes / 1024;
|
|
@@ -13071,7 +13119,7 @@ var FileUpload = React5__default.default.forwardRef(
|
|
|
13071
13119
|
rules: { required: required ? `${label} ${mergedLabels.requiredError}` : false },
|
|
13072
13120
|
render: ({ field: { onChange, value }, fieldState: { error } }) => {
|
|
13073
13121
|
const displayFile = currentFile || value;
|
|
13074
|
-
|
|
13122
|
+
React.useEffect(() => {
|
|
13075
13123
|
const fileToPreview = currentFile || value;
|
|
13076
13124
|
if (fileToPreview instanceof File) {
|
|
13077
13125
|
if (fileToPreview.type.startsWith("image/")) {
|
|
@@ -13513,6 +13561,8 @@ exports.IDENTITY_TYPE = IDENTITY_TYPE;
|
|
|
13513
13561
|
exports.InputDynamic = InputDynamic_default;
|
|
13514
13562
|
exports.LOAD_TYPE = LOAD_TYPE;
|
|
13515
13563
|
exports.MODAL_PRESETS = MODAL_PRESETS;
|
|
13564
|
+
exports.MY_TICKET_STATUS = MY_TICKET_STATUS;
|
|
13565
|
+
exports.MY_TICKET_TAB = MY_TICKET_TAB;
|
|
13516
13566
|
exports.ModalFilterTicket = ModalFilterTicket;
|
|
13517
13567
|
exports.ModalFilterTicketDefaultLabels = DEFAULT_LABELS16;
|
|
13518
13568
|
exports.ModalIllustration = ModalIllustration;
|