@asdp/ferryui 0.1.22-dev.9339 → 0.1.22-dev.9415

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.
Files changed (7) hide show
  1. package/dist/index.d.mts +166 -89
  2. package/dist/index.d.ts +166 -89
  3. package/dist/index.js +826 -507
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +824 -505
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -3716,8 +3716,14 @@ var InputDynamic = ({
3716
3716
  if (isMultiSelect) {
3717
3717
  const values = selectedOption ? selectedOption.map((opt) => opt.value) : [];
3718
3718
  field.onChange(values);
3719
+ if (onChange) {
3720
+ onChange(values);
3721
+ }
3719
3722
  } else {
3720
3723
  field.onChange(selectedOption ? selectedOption.value : "");
3724
+ if (onChange) {
3725
+ onChange(selectedOption ? selectedOption.value : "");
3726
+ }
3721
3727
  }
3722
3728
  },
3723
3729
  getOptionLabel: (option) => option.label,
@@ -5415,7 +5421,9 @@ var DEFAULT_LABELS10 = {
5415
5421
  harborNotFound: "Pelabuhan tidak ditemukan",
5416
5422
  closeAriaLabel: "Tutup",
5417
5423
  popularHarborHeader: "Pelabuhan Populer",
5418
- favoriteHeader: "Favorit"
5424
+ favoriteHeader: "Favorit",
5425
+ emptyContent: "Pelabuhan",
5426
+ travelPlanHeader: "Rencana Perjalanan"
5419
5427
  },
5420
5428
  en: {
5421
5429
  title: "Select Harbor",
@@ -5427,10 +5435,113 @@ var DEFAULT_LABELS10 = {
5427
5435
  harborNotFound: "Harbor not found",
5428
5436
  closeAriaLabel: "Close",
5429
5437
  popularHarborHeader: "Popular Harbor",
5430
- favoriteHeader: "Favorite"
5438
+ favoriteHeader: "Favorite",
5439
+ emptyContent: "Harbor",
5440
+ travelPlanHeader: "Travel Plan"
5441
+ }
5442
+ };
5443
+
5444
+ // src/components/EmptyContent/EmptyContent.constants.ts
5445
+ var DEFAULT_LABELS11 = {
5446
+ id: {
5447
+ defaultImageAlt: "Tidak ada konten",
5448
+ defaultTitle: "Data {konten} belum bisa dimuat",
5449
+ defaultMessage: "Silahkan coba muat ulang halaman ini atau cek kembali beberapa saat lagi.",
5450
+ defaultButtonText: "Muat Ulang"
5451
+ },
5452
+ en: {
5453
+ defaultImageAlt: "No content available",
5454
+ defaultTitle: "Data {content} could not be loaded",
5455
+ defaultMessage: "Please try reloading this page or check back in a few moments.",
5456
+ defaultButtonText: "Reload"
5457
+ }
5458
+ };
5459
+ var getFormattedDefaultTitle = (template, content) => {
5460
+ if (content) {
5461
+ return template.replace(/\{(konten|content)\}/g, content);
5431
5462
  }
5463
+ return template.replace(/\s*\{(konten|content)\}\s*/g, " ").trim();
5432
5464
  };
5433
5465
  var useStyles11 = reactComponents.makeStyles({
5466
+ root: {
5467
+ display: "flex",
5468
+ flexDirection: "column",
5469
+ alignItems: "center",
5470
+ justifyContent: "center",
5471
+ gap: reactComponents.tokens.spacingVerticalL,
5472
+ textAlign: "center",
5473
+ paddingTop: reactComponents.tokens.spacingVerticalXXL,
5474
+ paddingBottom: reactComponents.tokens.spacingVerticalXXL,
5475
+ paddingLeft: reactComponents.tokens.spacingHorizontalXL,
5476
+ paddingRight: reactComponents.tokens.spacingHorizontalXL,
5477
+ width: "100%"
5478
+ },
5479
+ image: {
5480
+ maxWidth: "100%",
5481
+ height: "auto"
5482
+ },
5483
+ textContainer: {
5484
+ display: "flex",
5485
+ flexDirection: "column",
5486
+ alignItems: "center",
5487
+ gap: reactComponents.tokens.spacingVerticalS,
5488
+ maxWidth: "400px"
5489
+ },
5490
+ title: {
5491
+ fontWeight: "600"
5492
+ },
5493
+ message: {
5494
+ color: reactComponents.tokens.colorNeutralForeground3,
5495
+ textAlign: "center"
5496
+ }
5497
+ });
5498
+ var EmptyContent = ({
5499
+ title,
5500
+ content,
5501
+ message,
5502
+ imageSrc = "/assets/images/illustrations/no-content.svg",
5503
+ imageAlt,
5504
+ imageWidth = 240,
5505
+ imageHeight = 180,
5506
+ actionButton,
5507
+ language = "id",
5508
+ labels,
5509
+ className
5510
+ }) => {
5511
+ const styles = useStyles11();
5512
+ const mergedLabels = { ...DEFAULT_LABELS11[language], ...labels };
5513
+ const displayTitle = title ?? getFormattedDefaultTitle(mergedLabels.defaultTitle, content);
5514
+ const displayMessage = message ?? mergedLabels.defaultMessage;
5515
+ const displayImageAlt = imageAlt ?? mergedLabels.defaultImageAlt;
5516
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reactComponents.mergeClasses(styles.root, className), children: [
5517
+ /* @__PURE__ */ jsxRuntime.jsx(
5518
+ "img",
5519
+ {
5520
+ src: imageSrc,
5521
+ alt: displayImageAlt,
5522
+ width: imageWidth,
5523
+ height: imageHeight,
5524
+ className: styles.image
5525
+ }
5526
+ ),
5527
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContainer, children: [
5528
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.title, children: displayTitle }),
5529
+ typeof displayMessage === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.message, children: displayMessage }) : displayMessage
5530
+ ] }),
5531
+ actionButton && /* @__PURE__ */ jsxRuntime.jsx(
5532
+ reactComponents.Button,
5533
+ {
5534
+ type: "button",
5535
+ appearance: actionButton.appearance || "primary",
5536
+ onClick: actionButton.onClick,
5537
+ shape: "circular",
5538
+ style: { width: "100%" },
5539
+ children: actionButton.text
5540
+ }
5541
+ )
5542
+ ] });
5543
+ };
5544
+ var useStyles12 = reactComponents.makeStyles({
5434
5545
  dialogTitle: {
5435
5546
  display: "flex",
5436
5547
  justifyContent: "space-between",
@@ -5568,7 +5679,7 @@ var HarborListItem = ({
5568
5679
  showDivider,
5569
5680
  containerClassName
5570
5681
  }) => {
5571
- const styles = useStyles11();
5682
+ const styles = useStyles12();
5572
5683
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5573
5684
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
5574
5685
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.listContent, onClick: () => onSelect(harbor), children: [
@@ -5591,6 +5702,57 @@ var HarborListItem = ({
5591
5702
  showDivider && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {})
5592
5703
  ] });
5593
5704
  };
5705
+ var HarborListSkeleton = ({
5706
+ count = 5,
5707
+ showFavoriteIcon = false
5708
+ }) => {
5709
+ const styles = useStyles12();
5710
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.harborList, children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.harborItem, children: [
5711
+ /* @__PURE__ */ jsxRuntime.jsxs(
5712
+ reactComponents.Skeleton,
5713
+ {
5714
+ style: {
5715
+ display: "flex",
5716
+ alignItems: "center",
5717
+ gap: "0.5rem",
5718
+ width: "70%"
5719
+ },
5720
+ children: [
5721
+ /* @__PURE__ */ jsxRuntime.jsx(
5722
+ reactComponents.SkeletonItem,
5723
+ {
5724
+ style: {
5725
+ width: "24px",
5726
+ height: "24px",
5727
+ borderRadius: "4px"
5728
+ }
5729
+ }
5730
+ ),
5731
+ /* @__PURE__ */ jsxRuntime.jsx(
5732
+ reactComponents.SkeletonItem,
5733
+ {
5734
+ style: {
5735
+ width: "100%",
5736
+ height: "20px",
5737
+ borderRadius: "4px"
5738
+ }
5739
+ }
5740
+ )
5741
+ ]
5742
+ }
5743
+ ),
5744
+ showFavoriteIcon && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
5745
+ reactComponents.SkeletonItem,
5746
+ {
5747
+ style: {
5748
+ width: "24px",
5749
+ height: "24px",
5750
+ borderRadius: "4px"
5751
+ }
5752
+ }
5753
+ ) })
5754
+ ] }, index)) });
5755
+ };
5594
5756
  var ModalSearchHarbor = ({
5595
5757
  language = "id",
5596
5758
  labels,
@@ -5601,7 +5763,8 @@ var ModalSearchHarbor = ({
5601
5763
  harbors,
5602
5764
  favoriteHarbors,
5603
5765
  lastSearchedHarbors,
5604
- isLoading = false,
5766
+ isLoadingPort = false,
5767
+ isLoadingTravelPlan = false,
5605
5768
  searchQuery,
5606
5769
  onSearchChange,
5607
5770
  onSelectHarbor,
@@ -5610,11 +5773,18 @@ var ModalSearchHarbor = ({
5610
5773
  onRemoveLastSearched,
5611
5774
  onClearLastSearched,
5612
5775
  onClearFavorite,
5776
+ reloadButtonPort,
5777
+ reloadButtonTravelPlan,
5778
+ reloadButtonAll,
5613
5779
  popularHarbors,
5614
- showButtonFavorite = true
5780
+ showButtonFavorite = true,
5781
+ emptyImageSrc = "",
5782
+ isErrorTravelPlan = false,
5783
+ isErrorPort = false
5615
5784
  }) => {
5616
- const styles = useStyles11();
5785
+ const styles = useStyles12();
5617
5786
  const mergedLabels = { ...DEFAULT_LABELS10[language], ...labels };
5787
+ const isError = isErrorTravelPlan && isErrorPort;
5618
5788
  const handleSelect = (harbor) => {
5619
5789
  onAddLastSearched(harbor);
5620
5790
  onSelectHarbor(harbor);
@@ -5650,7 +5820,15 @@ var ModalSearchHarbor = ({
5650
5820
  children: title || mergedLabels.title
5651
5821
  }
5652
5822
  ),
5653
- /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { className: styles.content, children: [
5823
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: isError ? /* @__PURE__ */ jsxRuntime.jsx(
5824
+ EmptyContent,
5825
+ {
5826
+ content: mergedLabels.emptyContent,
5827
+ language,
5828
+ actionButton: reloadButtonAll,
5829
+ imageSrc: emptyImageSrc
5830
+ }
5831
+ ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5654
5832
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
5655
5833
  reactComponents.Input,
5656
5834
  {
@@ -5669,177 +5847,154 @@ var ModalSearchHarbor = ({
5669
5847
  }
5670
5848
  ) }),
5671
5849
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.resultList, children: [
5672
- favoriteHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5673
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
5674
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.favoriteHeader }),
5675
- /* @__PURE__ */ jsxRuntime.jsx(
5676
- reactComponents.Caption1,
5850
+ isErrorTravelPlan ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) : isLoadingTravelPlan ? /* @__PURE__ */ jsxRuntime.jsx(HarborListSkeleton, { count: 3, showFavoriteIcon: false }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5851
+ favoriteHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5852
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
5853
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.favoriteHeader }),
5854
+ /* @__PURE__ */ jsxRuntime.jsx(
5855
+ reactComponents.Caption1,
5856
+ {
5857
+ className: reactComponents.mergeClasses(
5858
+ styles.dangerText,
5859
+ styles.cursorPointer
5860
+ ),
5861
+ onClick: onClearFavorite,
5862
+ children: mergedLabels.clearAllButton
5863
+ }
5864
+ )
5865
+ ] }),
5866
+ favoriteHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.buttonContainer, children: favoriteHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsxs(
5867
+ reactComponents.Button,
5677
5868
  {
5678
- className: reactComponents.mergeClasses(
5679
- styles.dangerText,
5680
- styles.cursorPointer
5869
+ onClick: () => handleSelect(harbor),
5870
+ size: "medium",
5871
+ appearance: "subtle",
5872
+ iconPosition: "before",
5873
+ className: styles.circularButton,
5874
+ icon: /* @__PURE__ */ jsxRuntime.jsx(
5875
+ react.Icon,
5876
+ {
5877
+ icon: "fluent:vehicle-ship-20-regular",
5878
+ fontSize: 20,
5879
+ color: reactComponents.tokens.colorBrandBackground
5880
+ }
5681
5881
  ),
5682
- onClick: onClearFavorite,
5683
- children: mergedLabels.clearAllButton
5684
- }
5685
- )
5882
+ children: [
5883
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.buttonContent, children: [
5884
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: harbor.portName }),
5885
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: harbor.branchName })
5886
+ ] }),
5887
+ /* @__PURE__ */ jsxRuntime.jsx(
5888
+ react.Icon,
5889
+ {
5890
+ icon: "fluent:star-24-filled",
5891
+ fontSize: 20,
5892
+ color: reactComponents.tokens.colorBrandBackground,
5893
+ style: { marginLeft: 5 }
5894
+ }
5895
+ )
5896
+ ]
5897
+ },
5898
+ harbor.portId
5899
+ )) })
5686
5900
  ] }),
5687
- favoriteHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.buttonContainer, children: favoriteHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsxs(
5688
- reactComponents.Button,
5689
- {
5690
- onClick: () => handleSelect(harbor),
5691
- size: "medium",
5692
- appearance: "subtle",
5693
- iconPosition: "before",
5694
- className: styles.circularButton,
5695
- icon: /* @__PURE__ */ jsxRuntime.jsx(
5696
- react.Icon,
5901
+ lastSearchedHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5902
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
5903
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.lastSearchedHeader }),
5904
+ /* @__PURE__ */ jsxRuntime.jsx(
5905
+ reactComponents.Caption1,
5697
5906
  {
5698
- icon: "fluent:vehicle-ship-20-regular",
5699
- fontSize: 20,
5700
- color: reactComponents.tokens.colorBrandBackground
5907
+ className: reactComponents.mergeClasses(
5908
+ styles.dangerText,
5909
+ styles.cursorPointer
5910
+ ),
5911
+ onClick: onClearLastSearched,
5912
+ children: mergedLabels.clearAllButton
5701
5913
  }
5702
- ),
5703
- children: [
5704
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.buttonContent, children: [
5705
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: harbor.portName }),
5706
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: harbor.branchName })
5707
- ] }),
5708
- /* @__PURE__ */ jsxRuntime.jsx(
5914
+ )
5915
+ ] }),
5916
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: lastSearchedHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsx(
5917
+ HarborListItem,
5918
+ {
5919
+ harbor,
5920
+ onSelect: handleSelect,
5921
+ containerClassName: styles.historyItem,
5922
+ trailingIcon: /* @__PURE__ */ jsxRuntime.jsx(
5709
5923
  react.Icon,
5710
5924
  {
5711
- icon: "fluent:star-24-filled",
5925
+ onClick: () => onRemoveLastSearched(harbor),
5926
+ icon: "fluent:dismiss-24-regular",
5712
5927
  fontSize: 20,
5713
- color: reactComponents.tokens.colorBrandBackground,
5714
- style: { marginLeft: 5 }
5928
+ className: styles.cursorPointer
5715
5929
  }
5716
- )
5717
- ]
5718
- },
5719
- harbor.portId
5720
- )) })
5721
- ] }),
5722
- lastSearchedHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5723
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
5724
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.lastSearchedHeader }),
5725
- /* @__PURE__ */ jsxRuntime.jsx(
5726
- reactComponents.Caption1,
5727
- {
5728
- className: reactComponents.mergeClasses(
5729
- styles.dangerText,
5730
- styles.cursorPointer
5731
5930
  ),
5732
- onClick: onClearLastSearched,
5733
- children: mergedLabels.clearAllButton
5734
- }
5735
- )
5931
+ showDivider: true
5932
+ },
5933
+ harbor.portId
5934
+ )) })
5736
5935
  ] }),
5737
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: lastSearchedHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsx(
5936
+ popularHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5937
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.popularHarborHeader }) }),
5938
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: popularHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsx(
5939
+ HarborListItem,
5940
+ {
5941
+ harbor,
5942
+ onSelect: handleSelect,
5943
+ containerClassName: styles.historyItem,
5944
+ showDivider: true
5945
+ },
5946
+ harbor.portId
5947
+ )) })
5948
+ ] })
5949
+ ] }),
5950
+ isErrorPort ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5951
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
5952
+ /* @__PURE__ */ jsxRuntime.jsx(
5953
+ EmptyContent,
5954
+ {
5955
+ content: mergedLabels.emptyContent,
5956
+ language,
5957
+ actionButton: reloadButtonPort,
5958
+ imageSrc: emptyImageSrc
5959
+ }
5960
+ )
5961
+ ] }) : isLoadingPort ? /* @__PURE__ */ jsxRuntime.jsx(
5962
+ HarborListSkeleton,
5963
+ {
5964
+ count: 5,
5965
+ showFavoriteIcon: showButtonFavorite
5966
+ }
5967
+ ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5968
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
5969
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.harborList, children: harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsxRuntime.jsx(
5738
5970
  HarborListItem,
5739
5971
  {
5740
5972
  harbor,
5741
5973
  onSelect: handleSelect,
5742
- containerClassName: styles.historyItem,
5743
- trailingIcon: /* @__PURE__ */ jsxRuntime.jsx(
5974
+ containerClassName: styles.harborItem,
5975
+ trailingIcon: showButtonFavorite && /* @__PURE__ */ jsxRuntime.jsx(
5744
5976
  react.Icon,
5745
5977
  {
5746
- onClick: () => onRemoveLastSearched(harbor),
5747
- icon: "fluent:dismiss-24-regular",
5748
- fontSize: 20,
5749
- className: styles.cursorPointer
5978
+ icon: harbor.isFavorite ? "fluent:star-24-filled" : "fluent:star-24-regular",
5979
+ color: reactComponents.tokens.colorBrandBackground,
5980
+ className: styles.cursorPointer,
5981
+ onClick: () => onToggleFavorite(harbor)
5750
5982
  }
5751
5983
  ),
5752
- showDivider: true
5753
- },
5754
- harbor.portId
5755
- )) })
5756
- ] }),
5757
- popularHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5758
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.popularHarborHeader }) }),
5759
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: popularHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsx(
5760
- HarborListItem,
5761
- {
5762
- harbor,
5763
- onSelect: handleSelect,
5764
- containerClassName: styles.historyItem,
5765
- showDivider: true
5984
+ showDivider: index !== harbors.length - 1
5766
5985
  },
5767
- harbor.portId
5768
- )) })
5769
- ] }),
5770
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
5771
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.harborList, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: [1, 2, 3, 4, 5].map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.harborItem, children: [
5772
- /* @__PURE__ */ jsxRuntime.jsxs(
5773
- reactComponents.Skeleton,
5774
- {
5775
- style: {
5776
- display: "flex",
5777
- alignItems: "center",
5778
- gap: "0.5rem",
5779
- width: "70%"
5780
- },
5781
- children: [
5782
- /* @__PURE__ */ jsxRuntime.jsx(
5783
- reactComponents.SkeletonItem,
5784
- {
5785
- style: {
5786
- width: "24px",
5787
- height: "24px",
5788
- borderRadius: "4px"
5789
- }
5790
- }
5791
- ),
5792
- /* @__PURE__ */ jsxRuntime.jsx(
5793
- reactComponents.SkeletonItem,
5794
- {
5795
- style: {
5796
- width: "100%",
5797
- height: "20px",
5798
- borderRadius: "4px"
5799
- }
5800
- }
5801
- )
5802
- ]
5803
- }
5804
- ),
5805
- showButtonFavorite && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
5806
- reactComponents.SkeletonItem,
5807
- {
5808
- style: {
5809
- width: "24px",
5810
- height: "24px",
5811
- borderRadius: "4px"
5812
- }
5813
- }
5814
- ) })
5815
- ] }, item)) }) : harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsxRuntime.jsx(
5816
- HarborListItem,
5817
- {
5818
- harbor,
5819
- onSelect: handleSelect,
5820
- containerClassName: styles.harborItem,
5821
- trailingIcon: showButtonFavorite && /* @__PURE__ */ jsxRuntime.jsx(
5822
- react.Icon,
5823
- {
5824
- icon: harbor.isFavorite ? "fluent:star-24-filled" : "fluent:star-24-regular",
5825
- color: reactComponents.tokens.colorBrandBackground,
5826
- className: styles.cursorPointer,
5827
- onClick: () => onToggleFavorite(harbor)
5828
- }
5829
- ),
5830
- showDivider: index !== harbors.length - 1
5831
- },
5832
- harbor.portId || index
5833
- )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.emptyState, children: mergedLabels.harborNotFound }) })
5986
+ harbor.portId || index
5987
+ )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.emptyState, children: mergedLabels.harborNotFound }) })
5988
+ ] })
5834
5989
  ] })
5835
- ] })
5990
+ ] }) })
5836
5991
  ] }) })
5837
5992
  }
5838
5993
  );
5839
5994
  };
5840
5995
 
5841
5996
  // src/components/ModalSelectDate/ModalSelectDate.constants.ts
5842
- var DEFAULT_LABELS11 = {
5997
+ var DEFAULT_LABELS12 = {
5843
5998
  id: {
5844
5999
  title: "Pilih Tanggal",
5845
6000
  oneWay: "Sekali Jalan",
@@ -5853,7 +6008,7 @@ var DEFAULT_LABELS11 = {
5853
6008
  closeAriaLabel: "Close"
5854
6009
  }
5855
6010
  };
5856
- var useStyles12 = reactComponents.makeStyles({
6011
+ var useStyles13 = reactComponents.makeStyles({
5857
6012
  dialogSurface: {
5858
6013
  maxWidth: "600px",
5859
6014
  width: "100%"
@@ -5973,8 +6128,8 @@ var ModalSelectDate = ({
5973
6128
  dateFormat = "DD MMMM YYYY",
5974
6129
  showRoundtrip = true
5975
6130
  }) => {
5976
- const styles = useStyles12();
5977
- const mergedLabels = { ...DEFAULT_LABELS11[language], ...labels };
6131
+ const styles = useStyles13();
6132
+ const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
5978
6133
  React.useEffect(() => {
5979
6134
  moment__default.default.locale(language === "id" ? "id" : "en");
5980
6135
  }, [language]);
@@ -6197,14 +6352,15 @@ var ModalSelectDate = ({
6197
6352
  };
6198
6353
 
6199
6354
  // src/components/ModalService/ModalService.constants.ts
6200
- var DEFAULT_LABELS12 = {
6355
+ var DEFAULT_LABELS13 = {
6201
6356
  id: {
6202
6357
  title: "Pilih Kelas Layanan",
6203
6358
  loading: "Memuat...",
6204
6359
  error: "Gagal memuat layanan",
6205
6360
  selectAll: "Pilih Semua",
6206
6361
  saveButton: "Simpan",
6207
- closeAriaLabel: "Tutup"
6362
+ closeAriaLabel: "Tutup",
6363
+ emptyContent: "Kelas Layanan"
6208
6364
  },
6209
6365
  en: {
6210
6366
  title: "Select Service Class",
@@ -6212,10 +6368,11 @@ var DEFAULT_LABELS12 = {
6212
6368
  error: "Error loading services",
6213
6369
  selectAll: "Select All",
6214
6370
  saveButton: "Save",
6215
- closeAriaLabel: "Close"
6371
+ closeAriaLabel: "Close",
6372
+ emptyContent: "Service Class"
6216
6373
  }
6217
6374
  };
6218
- var useStyles13 = reactComponents.makeStyles({
6375
+ var useStyles14 = reactComponents.makeStyles({
6219
6376
  dialogSurface: {
6220
6377
  maxWidth: "600px",
6221
6378
  width: "100%"
@@ -6288,6 +6445,66 @@ var useStyles13 = reactComponents.makeStyles({
6288
6445
  borderRadius: reactComponents.tokens.borderRadiusCircular
6289
6446
  }
6290
6447
  });
6448
+ var ServiceListSkeleton = ({
6449
+ count = 3
6450
+ }) => {
6451
+ const styles = useStyles14();
6452
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.serviceList, children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.serviceItem, children: [
6453
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.serviceContent, children: /* @__PURE__ */ jsxRuntime.jsxs(
6454
+ reactComponents.Skeleton,
6455
+ {
6456
+ style: {
6457
+ display: "flex",
6458
+ flexDirection: "column",
6459
+ gap: "4px",
6460
+ width: "80%"
6461
+ },
6462
+ children: [
6463
+ /* @__PURE__ */ jsxRuntime.jsx(
6464
+ reactComponents.SkeletonItem,
6465
+ {
6466
+ style: {
6467
+ width: "120px",
6468
+ height: "20px",
6469
+ borderRadius: "4px"
6470
+ }
6471
+ }
6472
+ ),
6473
+ /* @__PURE__ */ jsxRuntime.jsx(
6474
+ reactComponents.SkeletonItem,
6475
+ {
6476
+ style: {
6477
+ width: "80px",
6478
+ height: "16px",
6479
+ borderRadius: "4px"
6480
+ }
6481
+ }
6482
+ ),
6483
+ /* @__PURE__ */ jsxRuntime.jsx(
6484
+ reactComponents.SkeletonItem,
6485
+ {
6486
+ style: {
6487
+ width: "100%",
6488
+ height: "16px",
6489
+ borderRadius: "4px"
6490
+ }
6491
+ }
6492
+ )
6493
+ ]
6494
+ }
6495
+ ) }),
6496
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
6497
+ reactComponents.SkeletonItem,
6498
+ {
6499
+ style: {
6500
+ width: "20px",
6501
+ height: "20px",
6502
+ borderRadius: "4px"
6503
+ }
6504
+ }
6505
+ ) })
6506
+ ] }, index)) });
6507
+ };
6291
6508
  var ModalService = ({
6292
6509
  language = "id",
6293
6510
  labels,
@@ -6298,10 +6515,12 @@ var ModalService = ({
6298
6515
  selectedServiceIds,
6299
6516
  onSave,
6300
6517
  isLoading = false,
6301
- isError = false
6518
+ isError = false,
6519
+ reloadButton,
6520
+ emptyImageSrc = ""
6302
6521
  }) => {
6303
- const styles = useStyles13();
6304
- const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
6522
+ const styles = useStyles14();
6523
+ const mergedLabels = { ...DEFAULT_LABELS13[language], ...labels };
6305
6524
  const displayTitle = title || mergedLabels.title;
6306
6525
  const [selectedServices, setSelectedServices] = React.useState(selectedServiceIds);
6307
6526
  React.useEffect(() => {
@@ -6356,7 +6575,15 @@ var ModalService = ({
6356
6575
  children: displayTitle
6357
6576
  }
6358
6577
  ),
6359
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.loading }) : isError ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.error }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6578
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ServiceListSkeleton, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(
6579
+ EmptyContent,
6580
+ {
6581
+ content: mergedLabels.emptyContent,
6582
+ language,
6583
+ actionButton: reloadButton,
6584
+ imageSrc: emptyImageSrc
6585
+ }
6586
+ ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6360
6587
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.serviceList, children: [
6361
6588
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
6362
6589
  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.selectAll }),
@@ -6406,23 +6633,25 @@ var ModalService = ({
6406
6633
  };
6407
6634
 
6408
6635
  // src/components/ModalTotalPassengers/ModalTotalPassengers.constants.ts
6409
- var DEFAULT_LABELS13 = {
6636
+ var DEFAULT_LABELS14 = {
6410
6637
  id: {
6411
6638
  title: "Pilih Jumlah Penumpang",
6412
6639
  infoMessage: "Anda dapat menambahkan hingga {maxPassengers} penumpang pada golongan kendaraan ini.",
6413
6640
  loading: "Memuat...",
6414
6641
  saveButton: "Simpan",
6415
- closeAriaLabel: "Tutup"
6642
+ closeAriaLabel: "Tutup",
6643
+ emptyContent: "Kelas Penumpang"
6416
6644
  },
6417
6645
  en: {
6418
6646
  title: "Select Total Passengers",
6419
6647
  infoMessage: "You can add up to {maxPassengers} passengers in this vehicle category.",
6420
6648
  loading: "Loading...",
6421
6649
  saveButton: "Save",
6422
- closeAriaLabel: "Close"
6650
+ closeAriaLabel: "Close",
6651
+ emptyContent: "Passengers Class"
6423
6652
  }
6424
6653
  };
6425
- var useStyles14 = reactComponents.makeStyles({
6654
+ var useStyles15 = reactComponents.makeStyles({
6426
6655
  dialogSurface: {
6427
6656
  maxWidth: "600px",
6428
6657
  width: "100%"
@@ -6489,6 +6718,62 @@ var useStyles14 = reactComponents.makeStyles({
6489
6718
  margin: 0
6490
6719
  }
6491
6720
  });
6721
+ var TotalPassengersListSkeleton = ({
6722
+ count = 3
6723
+ }) => {
6724
+ const styles = useStyles15();
6725
+ return /* @__PURE__ */ jsxRuntime.jsx(
6726
+ "div",
6727
+ {
6728
+ style: {
6729
+ display: "flex",
6730
+ flexDirection: "column",
6731
+ marginTop: reactComponents.tokens.spacingHorizontalM
6732
+ },
6733
+ children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
6734
+ "div",
6735
+ {
6736
+ className: styles.accordionItem,
6737
+ style: { padding: "8px 0" },
6738
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.accordionHeader, style: { padding: "0 12px" }, children: [
6739
+ /* @__PURE__ */ jsxRuntime.jsx(
6740
+ "div",
6741
+ {
6742
+ style: { display: "flex", alignItems: "center", width: "100%" },
6743
+ children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
6744
+ reactComponents.SkeletonItem,
6745
+ {
6746
+ style: {
6747
+ width: "120px",
6748
+ height: "18px"
6749
+ }
6750
+ }
6751
+ ) })
6752
+ }
6753
+ ),
6754
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "4px" } }),
6755
+ /* @__PURE__ */ jsxRuntime.jsx(
6756
+ "div",
6757
+ {
6758
+ style: { display: "flex", alignItems: "center", width: "100%" },
6759
+ children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
6760
+ reactComponents.SkeletonItem,
6761
+ {
6762
+ style: {
6763
+ width: "48px",
6764
+ height: "14px"
6765
+ }
6766
+ }
6767
+ ) })
6768
+ }
6769
+ )
6770
+ ] })
6771
+ },
6772
+ index
6773
+ ))
6774
+ }
6775
+ );
6776
+ };
6492
6777
  var ModalTotalPassengers = ({
6493
6778
  language = "id",
6494
6779
  labels,
@@ -6499,11 +6784,14 @@ var ModalTotalPassengers = ({
6499
6784
  selectedPassengers,
6500
6785
  onSave,
6501
6786
  isLoading = false,
6787
+ isError = false,
6788
+ reloadButton,
6789
+ emptyImageSrc,
6502
6790
  maxPassengers = 10,
6503
6791
  infoMessage
6504
6792
  }) => {
6505
- const styles = useStyles14();
6506
- const mergedLabels = { ...DEFAULT_LABELS13[language], ...labels };
6793
+ const styles = useStyles15();
6794
+ const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
6507
6795
  const [passengers, setPassengers] = React.useState([]);
6508
6796
  const [openItems, setOpenItems] = React.useState([]);
6509
6797
  const defaultInfoMessage = mergedLabels.infoMessage.replace(
@@ -6560,11 +6848,16 @@ var ModalTotalPassengers = ({
6560
6848
  (p) => p.passengerAgeCode === passengerAgeCode
6561
6849
  );
6562
6850
  if (!passenger) return 0;
6563
- const cls = passenger.classes.find(
6564
- (c) => c.classCode === classCode
6565
- );
6851
+ const cls = passenger.classes.find((c) => c.classCode === classCode);
6566
6852
  return cls?.count ?? 0;
6567
6853
  };
6854
+ const getTotalCountForType = (passengerAgeCode) => {
6855
+ const passenger = passengers.find(
6856
+ (p) => p.passengerAgeCode === passengerAgeCode
6857
+ );
6858
+ if (!passenger) return 0;
6859
+ return passenger.classes.reduce((sum, cls) => sum + (cls.count ?? 0), 0);
6860
+ };
6568
6861
  const getTotalForType = (passengerAgeCode) => {
6569
6862
  const passenger = passengers.find(
6570
6863
  (p) => p.passengerAgeCode === passengerAgeCode
@@ -6619,10 +6912,7 @@ var ModalTotalPassengers = ({
6619
6912
  classes: passenger.classes.map((cls) => {
6620
6913
  if (cls.classCode === classCode && (cls.count ?? 0) > 0) {
6621
6914
  const newCount = (cls.count ?? 0) - 1;
6622
- const newPassengers = (cls.passengers || []).slice(
6623
- 0,
6624
- newCount
6625
- );
6915
+ const newPassengers = (cls.passengers || []).slice(0, newCount);
6626
6916
  return {
6627
6917
  ...cls,
6628
6918
  count: newCount,
@@ -6660,131 +6950,134 @@ var ModalTotalPassengers = ({
6660
6950
  children: title || mergedLabels.title
6661
6951
  }
6662
6952
  ),
6663
- /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { children: [
6953
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(TotalPassengersListSkeleton, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(
6954
+ EmptyContent,
6955
+ {
6956
+ content: mergedLabels.emptyContent,
6957
+ language,
6958
+ actionButton: reloadButton,
6959
+ imageSrc: emptyImageSrc
6960
+ }
6961
+ ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6664
6962
  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { shape: "rounded", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: infoMessage || defaultInfoMessage }) }),
6665
- isLoading ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.loading }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6666
- /* @__PURE__ */ jsxRuntime.jsx(
6667
- reactComponents.Accordion,
6668
- {
6669
- collapsible: true,
6670
- multiple: true,
6671
- openItems,
6672
- onToggle: (_, data) => setOpenItems(data.openItems),
6673
- className: styles.passengerSection,
6674
- children: passengerTypes.map((passengerType) => {
6675
- const classes = passengerType.classes || [];
6676
- return /* @__PURE__ */ jsxRuntime.jsxs(
6677
- reactComponents.AccordionItem,
6678
- {
6679
- value: String(passengerType.id),
6680
- className: styles.accordionItem,
6681
- children: [
6682
- /* @__PURE__ */ jsxRuntime.jsxs(
6683
- reactComponents.AccordionHeader,
6684
- {
6685
- className: styles.accordionHeader,
6686
- expandIconPosition: "end",
6687
- children: [
6688
- passengerType.passengerAgeName,
6689
- " (",
6690
- getTotalForType(passengerType.passengerAgeCode),
6691
- ")"
6692
- ]
6693
- }
6694
- ),
6695
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { className: styles.accordionPanel, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.nestedSection, children: classes.map((cls) => /* @__PURE__ */ jsxRuntime.jsxs(
6696
- "div",
6697
- {
6698
- className: styles.nestedRow,
6699
- children: [
6700
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: (cls?.className || "")?.toUpperCase() }),
6701
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.passengerCount, children: [
6702
- /* @__PURE__ */ jsxRuntime.jsx(
6703
- reactComponents.Button,
6704
- {
6705
- appearance: "outline",
6706
- className: styles.counterButton,
6707
- size: "small",
6708
- icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:subtract-12-regular" }),
6709
- onClick: (e) => {
6710
- e.stopPropagation();
6711
- handleDecrement(
6712
- passengerType.passengerAgeCode,
6713
- cls.classCode
6714
- );
6715
- },
6716
- disabled: getServiceCount(
6717
- passengerType.passengerAgeCode,
6718
- cls.classCode
6719
- ) === 0
6720
- }
6721
- ),
6722
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.countText, children: getServiceCount(
6963
+ /* @__PURE__ */ jsxRuntime.jsx(
6964
+ reactComponents.Accordion,
6965
+ {
6966
+ collapsible: true,
6967
+ multiple: true,
6968
+ openItems,
6969
+ onToggle: (_, data) => setOpenItems(data.openItems),
6970
+ className: styles.passengerSection,
6971
+ children: passengerTypes.map((passengerType) => {
6972
+ const classes = passengerType.classes || [];
6973
+ return /* @__PURE__ */ jsxRuntime.jsxs(
6974
+ reactComponents.AccordionItem,
6975
+ {
6976
+ value: String(passengerType.id),
6977
+ className: styles.accordionItem,
6978
+ children: [
6979
+ /* @__PURE__ */ jsxRuntime.jsxs(
6980
+ reactComponents.AccordionHeader,
6981
+ {
6982
+ className: styles.accordionHeader,
6983
+ expandIconPosition: "end",
6984
+ children: [
6985
+ passengerType.passengerAgeName,
6986
+ " (",
6987
+ getTotalForType(passengerType.passengerAgeCode),
6988
+ ")"
6989
+ ]
6990
+ }
6991
+ ),
6992
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { className: styles.accordionPanel, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.nestedSection, children: classes.map((cls) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.nestedRow, children: [
6993
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: (cls?.className || "")?.toUpperCase() }),
6994
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.passengerCount, children: [
6995
+ /* @__PURE__ */ jsxRuntime.jsx(
6996
+ reactComponents.Button,
6997
+ {
6998
+ appearance: "outline",
6999
+ className: styles.counterButton,
7000
+ size: "small",
7001
+ icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:subtract-12-regular" }),
7002
+ onClick: (e) => {
7003
+ e.stopPropagation();
7004
+ handleDecrement(
6723
7005
  passengerType.passengerAgeCode,
6724
7006
  cls.classCode
6725
- ) }),
6726
- /* @__PURE__ */ jsxRuntime.jsx(
6727
- reactComponents.Button,
6728
- {
6729
- appearance: "outline",
6730
- className: styles.counterButton,
6731
- size: "small",
6732
- icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:add-12-regular" }),
6733
- disabled: getServiceCount(
6734
- passengerType.passengerAgeCode,
6735
- cls.classCode
6736
- ) >= cls.maxCapacity || totalPassengerCount >= maxPassengers,
6737
- onClick: (e) => {
6738
- e.stopPropagation();
6739
- handleIncrement(
6740
- passengerType.passengerAgeCode,
6741
- cls.classCode
6742
- );
6743
- }
6744
- }
6745
- )
6746
- ] })
6747
- ]
6748
- },
6749
- cls.id
6750
- )) }) })
6751
- ]
6752
- },
6753
- passengerType.id
6754
- );
6755
- })
6756
- }
6757
- ),
6758
- /* @__PURE__ */ jsxRuntime.jsx(
6759
- reactComponents.Button,
6760
- {
6761
- appearance: "primary",
6762
- size: "medium",
6763
- className: styles.submitButton,
6764
- onClick: handleSave,
6765
- children: mergedLabels.saveButton
6766
- }
6767
- )
6768
- ] })
6769
- ] })
7007
+ );
7008
+ },
7009
+ disabled: getServiceCount(
7010
+ passengerType.passengerAgeCode,
7011
+ cls.classCode
7012
+ ) === 0 || getTotalCountForType(
7013
+ passengerType.passengerAgeCode
7014
+ ) <= passengerType.minCapacity
7015
+ }
7016
+ ),
7017
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.countText, children: getServiceCount(
7018
+ passengerType.passengerAgeCode,
7019
+ cls.classCode
7020
+ ) }),
7021
+ /* @__PURE__ */ jsxRuntime.jsx(
7022
+ reactComponents.Button,
7023
+ {
7024
+ appearance: "outline",
7025
+ className: styles.counterButton,
7026
+ size: "small",
7027
+ icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:add-12-regular" }),
7028
+ disabled: getServiceCount(
7029
+ passengerType.passengerAgeCode,
7030
+ cls.classCode
7031
+ ) >= cls.maxCapacity || totalPassengerCount >= maxPassengers,
7032
+ onClick: (e) => {
7033
+ e.stopPropagation();
7034
+ handleIncrement(
7035
+ passengerType.passengerAgeCode,
7036
+ cls.classCode
7037
+ );
7038
+ }
7039
+ }
7040
+ )
7041
+ ] })
7042
+ ] }, cls.id)) }) })
7043
+ ]
7044
+ },
7045
+ passengerType.id
7046
+ );
7047
+ })
7048
+ }
7049
+ ),
7050
+ /* @__PURE__ */ jsxRuntime.jsx(
7051
+ reactComponents.Button,
7052
+ {
7053
+ appearance: "primary",
7054
+ size: "medium",
7055
+ className: styles.submitButton,
7056
+ onClick: handleSave,
7057
+ children: mergedLabels.saveButton
7058
+ }
7059
+ )
7060
+ ] }) })
6770
7061
  ] }) }) });
6771
7062
  };
6772
7063
 
6773
7064
  // src/components/ModalTypeOfService/ModalTypeOfService.constants.ts
6774
- var DEFAULT_LABELS14 = {
7065
+ var DEFAULT_LABELS15 = {
6775
7066
  id: {
6776
- title: "Pilih Tipe Layanan",
7067
+ title: "Pilih Jenis Layanan",
6777
7068
  cancelButton: "Batal",
6778
7069
  saveButton: "Simpan",
6779
7070
  vehiclesAlt: "kendaraan",
6780
- closeAriaLabel: "Tutup"
7071
+ closeAriaLabel: "Tutup",
7072
+ emptyContent: "Jenis Layanan"
6781
7073
  },
6782
7074
  en: {
6783
7075
  title: "Select Service Type",
6784
7076
  cancelButton: "Cancel",
6785
7077
  saveButton: "Save",
6786
7078
  vehiclesAlt: "vehicles",
6787
- closeAriaLabel: "Close"
7079
+ closeAriaLabel: "Close",
7080
+ emptyContent: "Service Type"
6788
7081
  }
6789
7082
  };
6790
7083
  var DEFAULT_VEHICLE_ICONS = {
@@ -6799,7 +7092,7 @@ var DEFAULT_VEHICLE_ICONS = {
6799
7092
  bigTruck: "/assets/images/icons/big-truck.webp",
6800
7093
  looseLoad: "/assets/images/icons/loose-load.webp"
6801
7094
  };
6802
- var useStyles15 = reactComponents.makeStyles({
7095
+ var useStyles16 = reactComponents.makeStyles({
6803
7096
  dialogSurface: {
6804
7097
  maxWidth: "600px",
6805
7098
  width: "100%"
@@ -6842,6 +7135,89 @@ var useStyles15 = reactComponents.makeStyles({
6842
7135
  justifyContent: "flex-end"
6843
7136
  }
6844
7137
  });
7138
+ var TypeOfServiceListSkeleton = ({ count = 3 }) => {
7139
+ const styles = useStyles16();
7140
+ return /* @__PURE__ */ jsxRuntime.jsx(
7141
+ "div",
7142
+ {
7143
+ style: {
7144
+ display: "flex",
7145
+ flexDirection: "column",
7146
+ marginTop: reactComponents.tokens.spacingHorizontalM
7147
+ },
7148
+ children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
7149
+ "div",
7150
+ {
7151
+ className: styles.accordionItem,
7152
+ style: { padding: "8px 0" },
7153
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.accordionHeader, children: [
7154
+ /* @__PURE__ */ jsxRuntime.jsxs(
7155
+ "div",
7156
+ {
7157
+ style: { display: "flex", alignItems: "center", width: "100%" },
7158
+ children: [
7159
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
7160
+ reactComponents.SkeletonItem,
7161
+ {
7162
+ style: {
7163
+ width: "74px",
7164
+ height: "74px",
7165
+ borderRadius: "8px"
7166
+ }
7167
+ }
7168
+ ) }),
7169
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.accordionTitleAndInfo, style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs(
7170
+ reactComponents.Skeleton,
7171
+ {
7172
+ style: {
7173
+ display: "flex",
7174
+ flexDirection: "column",
7175
+ gap: "4px"
7176
+ },
7177
+ children: [
7178
+ /* @__PURE__ */ jsxRuntime.jsx(
7179
+ reactComponents.SkeletonItem,
7180
+ {
7181
+ style: {
7182
+ width: "120px",
7183
+ height: "20px",
7184
+ borderRadius: "4px"
7185
+ }
7186
+ }
7187
+ ),
7188
+ /* @__PURE__ */ jsxRuntime.jsx(
7189
+ reactComponents.SkeletonItem,
7190
+ {
7191
+ style: {
7192
+ width: "150px",
7193
+ height: "16px",
7194
+ borderRadius: "4px"
7195
+ }
7196
+ }
7197
+ )
7198
+ ]
7199
+ }
7200
+ ) })
7201
+ ]
7202
+ }
7203
+ ),
7204
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
7205
+ reactComponents.SkeletonItem,
7206
+ {
7207
+ style: {
7208
+ width: "16px",
7209
+ height: "16px",
7210
+ borderRadius: "50%"
7211
+ }
7212
+ }
7213
+ ) })
7214
+ ] })
7215
+ },
7216
+ index
7217
+ ))
7218
+ }
7219
+ );
7220
+ };
6845
7221
  var ModalTypeOfService = ({
6846
7222
  language = "id",
6847
7223
  labels,
@@ -6851,10 +7227,14 @@ var ModalTypeOfService = ({
6851
7227
  serviceTypes,
6852
7228
  selectedService,
6853
7229
  onSave,
6854
- renderImage
7230
+ renderImage,
7231
+ isLoading = false,
7232
+ isError = false,
7233
+ reloadButton,
7234
+ emptyImageSrc = ""
6855
7235
  }) => {
6856
- const styles = useStyles15();
6857
- const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
7236
+ const styles = useStyles16();
7237
+ const mergedLabels = { ...DEFAULT_LABELS15[language], ...labels };
6858
7238
  const [selectedServiceId, setSelectedServiceId] = React.useState(
6859
7239
  selectedService?.id || 0
6860
7240
  );
@@ -6967,7 +7347,15 @@ var ModalTypeOfService = ({
6967
7347
  children: title || mergedLabels.title
6968
7348
  }
6969
7349
  ),
6970
- /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { children: [
7350
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(TypeOfServiceListSkeleton, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(
7351
+ EmptyContent,
7352
+ {
7353
+ content: mergedLabels.emptyContent,
7354
+ language,
7355
+ actionButton: reloadButton,
7356
+ imageSrc: emptyImageSrc
7357
+ }
7358
+ ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6971
7359
  /* @__PURE__ */ jsxRuntime.jsx(
6972
7360
  reactComponents.Accordion,
6973
7361
  {
@@ -7014,7 +7402,9 @@ var ModalTypeOfService = ({
7014
7402
  styles.accordionHeader,
7015
7403
  styles.accordionItem
7016
7404
  ),
7017
- style: { padding: reactComponents.tokens.spacingHorizontalXS },
7405
+ style: {
7406
+ padding: reactComponents.tokens.spacingHorizontalXS
7407
+ },
7018
7408
  children: [
7019
7409
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: imageRenderer({
7020
7410
  src: childItem.image,
@@ -7022,10 +7412,16 @@ var ModalTypeOfService = ({
7022
7412
  width: 48,
7023
7413
  height: 48
7024
7414
  }) }),
7025
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.accordionTitleAndInfo, children: [
7026
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: childItem.title }),
7027
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: childItem.info })
7028
- ] }),
7415
+ /* @__PURE__ */ jsxRuntime.jsxs(
7416
+ "div",
7417
+ {
7418
+ className: styles.accordionTitleAndInfo,
7419
+ children: [
7420
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: childItem.title }),
7421
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: childItem.info })
7422
+ ]
7423
+ }
7424
+ ),
7029
7425
  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: String(childItem.id) })
7030
7426
  ]
7031
7427
  },
@@ -7075,7 +7471,15 @@ var ModalTypeOfService = ({
7075
7471
  }
7076
7472
  ),
7077
7473
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.footer, children: [
7078
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { appearance: "secondary", shape: "circular", onClick: onClose, children: mergedLabels.cancelButton }),
7474
+ /* @__PURE__ */ jsxRuntime.jsx(
7475
+ reactComponents.Button,
7476
+ {
7477
+ appearance: "secondary",
7478
+ shape: "circular",
7479
+ onClick: onClose,
7480
+ children: mergedLabels.cancelButton
7481
+ }
7482
+ ),
7079
7483
  /* @__PURE__ */ jsxRuntime.jsx(
7080
7484
  reactComponents.Button,
7081
7485
  {
@@ -7087,12 +7491,12 @@ var ModalTypeOfService = ({
7087
7491
  }
7088
7492
  )
7089
7493
  ] })
7090
- ] })
7494
+ ] }) })
7091
7495
  ] }) }) });
7092
7496
  };
7093
7497
 
7094
7498
  // src/components/SortMenu/SortMenu.constants.ts
7095
- var DEFAULT_LABELS15 = {
7499
+ var DEFAULT_LABELS16 = {
7096
7500
  id: {
7097
7501
  filterButtonText: "Filter",
7098
7502
  sortButtonText: "Urutkan Berdasarkan",
@@ -7134,7 +7538,7 @@ var getSortLabel = (value) => {
7134
7538
  const option = DEFAULT_SORT_OPTIONS.find((opt) => opt.value === value);
7135
7539
  return option?.label || "Rekomendasi";
7136
7540
  };
7137
- var useStyles16 = reactComponents.makeStyles({
7541
+ var useStyles17 = reactComponents.makeStyles({
7138
7542
  container: {
7139
7543
  display: "flex",
7140
7544
  width: "100%",
@@ -7170,10 +7574,10 @@ var SortMenu = ({
7170
7574
  sortButtonText: deprecatedSortButtonText,
7171
7575
  clearFiltersText: deprecatedClearFiltersText
7172
7576
  }) => {
7173
- const styles = useStyles16();
7577
+ const styles = useStyles17();
7174
7578
  const labels = React__default.default.useMemo(
7175
7579
  () => ({
7176
- ...DEFAULT_LABELS15[language],
7580
+ ...DEFAULT_LABELS16[language],
7177
7581
  ...customLabels,
7178
7582
  // Fallback to deprecated props if provided
7179
7583
  ...deprecatedFilterButtonText && {
@@ -7285,7 +7689,7 @@ var SortMenu = ({
7285
7689
  };
7286
7690
 
7287
7691
  // src/components/ModalFilterTicket/ModalFilterTicket.constants.ts
7288
- var DEFAULT_LABELS16 = {
7692
+ var DEFAULT_LABELS17 = {
7289
7693
  id: {
7290
7694
  title: "Filter dengan",
7291
7695
  serviceTypeLabel: "Jenis Layanan",
@@ -7346,7 +7750,7 @@ var DEFAULT_DURATION_RANGE = {
7346
7750
  min: 0,
7347
7751
  max: 8
7348
7752
  };
7349
- var useStyles17 = reactComponents.makeStyles({
7753
+ var useStyles18 = reactComponents.makeStyles({
7350
7754
  dialogSurface: {
7351
7755
  maxWidth: "600px",
7352
7756
  width: "100%"
@@ -7456,8 +7860,8 @@ var ModalFilterTicket = ({
7456
7860
  minDuration = DEFAULT_DURATION_RANGE.min,
7457
7861
  maxDuration = DEFAULT_DURATION_RANGE.max
7458
7862
  }) => {
7459
- const styles = useStyles17();
7460
- const mergedLabels = { ...DEFAULT_LABELS16[language], ...labels };
7863
+ const styles = useStyles18();
7864
+ const mergedLabels = { ...DEFAULT_LABELS17[language], ...labels };
7461
7865
  const [rangeReady, setRangeReady] = React.useState(false);
7462
7866
  React.useEffect(() => {
7463
7867
  if (open) {
@@ -7767,7 +8171,7 @@ var ModalFilterTicket = ({
7767
8171
  };
7768
8172
 
7769
8173
  // src/components/DateFilter/DateFilter.constants.ts
7770
- var DEFAULT_LABELS17 = {
8174
+ var DEFAULT_LABELS18 = {
7771
8175
  id: {
7772
8176
  prevButtonAriaLabel: "Tanggal sebelumnya",
7773
8177
  nextButtonAriaLabel: "Tanggal berikutnya",
@@ -7780,7 +8184,7 @@ var DEFAULT_LABELS17 = {
7780
8184
  }
7781
8185
  };
7782
8186
  var DEFAULT_SCROLL_AMOUNT = 150;
7783
- var useStyles18 = reactComponents.makeStyles({
8187
+ var useStyles19 = reactComponents.makeStyles({
7784
8188
  container: {
7785
8189
  display: "flex",
7786
8190
  alignItems: "stretch",
@@ -7863,10 +8267,10 @@ var DateFilter = ({
7863
8267
  labels,
7864
8268
  isLoading = false
7865
8269
  }) => {
7866
- const styles = useStyles18();
8270
+ const styles = useStyles19();
7867
8271
  const scrollRef = React.useRef(null);
7868
8272
  const mergedLabels = {
7869
- ...DEFAULT_LABELS17[language],
8273
+ ...DEFAULT_LABELS18[language],
7870
8274
  ...labels
7871
8275
  };
7872
8276
  const handlePrev = () => {
@@ -7929,7 +8333,7 @@ var DateFilter = ({
7929
8333
  };
7930
8334
 
7931
8335
  // src/components/ModalSearchTicket/ModalSearchTicket.constants.ts
7932
- var DEFAULT_LABELS18 = {
8336
+ var DEFAULT_LABELS19 = {
7933
8337
  id: {
7934
8338
  title: "Cari Jadwal Lainnya",
7935
8339
  fromLabel: "Dari",
@@ -7989,7 +8393,7 @@ var DEFAULT_FORM_VALUES = {
7989
8393
  typeOfService: "",
7990
8394
  passenger: ""
7991
8395
  };
7992
- var useStyles19 = reactComponents.makeStyles({
8396
+ var useStyles20 = reactComponents.makeStyles({
7993
8397
  dialogSurface: {
7994
8398
  maxWidth: "900px",
7995
8399
  width: "100%"
@@ -8091,8 +8495,8 @@ var ModalSearchTicket = ({
8091
8495
  showRoundTrip = true,
8092
8496
  ...props
8093
8497
  }) => {
8094
- const styles = useStyles19();
8095
- const mergedLabels = { ...DEFAULT_LABELS18[language], ...labels };
8498
+ const styles = useStyles20();
8499
+ const mergedLabels = { ...DEFAULT_LABELS19[language], ...labels };
8096
8500
  const { control, setValue, handleSubmit, watch } = reactHookForm.useForm({
8097
8501
  defaultValues: {
8098
8502
  ...DEFAULT_FORM_VALUES,
@@ -8529,7 +8933,7 @@ var ModalSearchTicket = ({
8529
8933
  };
8530
8934
 
8531
8935
  // src/components/Stepper/Stepper.constants.ts
8532
- var DEFAULT_LABELS19 = {
8936
+ var DEFAULT_LABELS20 = {
8533
8937
  id: {
8534
8938
  stepperBackgroundAlt: "Latar Belakang Stepper",
8535
8939
  ferryIconAlt: "Ikon Kapal"
@@ -8539,7 +8943,7 @@ var DEFAULT_LABELS19 = {
8539
8943
  ferryIconAlt: "Ferry Icon"
8540
8944
  }
8541
8945
  };
8542
- var useStyles20 = reactComponents.makeStyles({
8946
+ var useStyles21 = reactComponents.makeStyles({
8543
8947
  stepperWrapper: {
8544
8948
  position: "relative",
8545
8949
  width: "100%",
@@ -8664,8 +9068,8 @@ var Stepper = ({
8664
9068
  language = "id",
8665
9069
  labels
8666
9070
  }) => {
8667
- const styles = useStyles20();
8668
- const mergedLabels = { ...DEFAULT_LABELS19[language], ...labels };
9071
+ const styles = useStyles21();
9072
+ const mergedLabels = { ...DEFAULT_LABELS20[language], ...labels };
8669
9073
  const currentStepIndex = React.useMemo(() => {
8670
9074
  if (typeof currentStep === "number") {
8671
9075
  return steps.findIndex((step) => step.number === currentStep);
@@ -8721,7 +9125,7 @@ var Stepper = ({
8721
9125
  };
8722
9126
 
8723
9127
  // src/components/CardOrdererInfo/CardOrdererInfo.constants.ts
8724
- var DEFAULT_LABELS20 = {
9128
+ var DEFAULT_LABELS21 = {
8725
9129
  id: {
8726
9130
  title: "Informasi Pemesan",
8727
9131
  ordererName: "Nama Pemesan",
@@ -8735,7 +9139,7 @@ var DEFAULT_LABELS20 = {
8735
9139
  email: "Email"
8736
9140
  }
8737
9141
  };
8738
- var useStyles21 = reactComponents.makeStyles({
9142
+ var useStyles22 = reactComponents.makeStyles({
8739
9143
  card: {
8740
9144
  padding: "1.5rem",
8741
9145
  borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -8765,8 +9169,8 @@ var CardOrdererInfo = ({
8765
9169
  labels,
8766
9170
  className
8767
9171
  }) => {
8768
- const styles = useStyles21();
8769
- const mergedLabels = { ...DEFAULT_LABELS20[language], ...labels };
9172
+ const styles = useStyles22();
9173
+ const mergedLabels = { ...DEFAULT_LABELS21[language], ...labels };
8770
9174
  return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: className || styles.card, children: [
8771
9175
  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { children: mergedLabels.title }),
8772
9176
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
@@ -8787,7 +9191,7 @@ var CardOrdererInfo = ({
8787
9191
  };
8788
9192
 
8789
9193
  // src/components/ModalListPassenger/ModalListPassenger.constants.ts
8790
- var DEFAULT_LABELS21 = {
9194
+ var DEFAULT_LABELS22 = {
8791
9195
  id: {
8792
9196
  title: "Detail Penumpang",
8793
9197
  // sameAsOrderer: 'Sama Dengan Pemesan',
@@ -8817,7 +9221,7 @@ var DEFAULT_LABELS21 = {
8817
9221
  }
8818
9222
  }
8819
9223
  };
8820
- var useStyles22 = reactComponents.makeStyles({
9224
+ var useStyles23 = reactComponents.makeStyles({
8821
9225
  dialogSurface: {
8822
9226
  maxWidth: "600px",
8823
9227
  width: "100%",
@@ -8872,8 +9276,8 @@ var ModalListPassenger = ({
8872
9276
  // sameAsOrderer,
8873
9277
  // onSameAsOrdererChange,
8874
9278
  }) => {
8875
- const styles = useStyles22();
8876
- const mergedLabels = { ...DEFAULT_LABELS21[language], ...labels };
9279
+ const styles = useStyles23();
9280
+ const mergedLabels = { ...DEFAULT_LABELS22[language], ...labels };
8877
9281
  const displayTitle = title || mergedLabels.title;
8878
9282
  const handleClose = () => {
8879
9283
  onClose();
@@ -9004,7 +9408,7 @@ var ModalListPassenger = ({
9004
9408
  };
9005
9409
 
9006
9410
  // src/components/ModalPassengerForm/ModalPassengerForm.constants.ts
9007
- var DEFAULT_LABELS22 = {
9411
+ var DEFAULT_LABELS23 = {
9008
9412
  id: {
9009
9413
  title: "Detail Penumpang",
9010
9414
  titleLabel: "Title",
@@ -9155,7 +9559,7 @@ var calculateAge = (birthDate) => {
9155
9559
  }
9156
9560
  return { years: Math.max(0, years), months: Math.max(0, months) };
9157
9561
  };
9158
- var useStyles23 = reactComponents.makeStyles({
9562
+ var useStyles24 = reactComponents.makeStyles({
9159
9563
  dialogSurface: {
9160
9564
  maxWidth: "600px",
9161
9565
  width: "100%",
@@ -9335,10 +9739,10 @@ var ModalPassengerForm = ({
9335
9739
  ticketClassOptions,
9336
9740
  onScanComplete
9337
9741
  }) => {
9338
- const styles = useStyles23();
9339
- const mergedLabels = { ...DEFAULT_LABELS22[language], ...labels };
9742
+ const styles = useStyles24();
9743
+ const mergedLabels = { ...DEFAULT_LABELS23[language], ...labels };
9340
9744
  const mergedErrors = {
9341
- ...DEFAULT_LABELS22[language].errors,
9745
+ ...DEFAULT_LABELS23[language].errors,
9342
9746
  ...labels?.errors
9343
9747
  };
9344
9748
  const displayTitle = title || mergedLabels.title;
@@ -10070,7 +10474,7 @@ var ModalPassengerForm = ({
10070
10474
  };
10071
10475
 
10072
10476
  // src/components/CardPassengerList/CardPassengerList.constants.ts
10073
- var DEFAULT_LABELS23 = {
10477
+ var DEFAULT_LABELS24 = {
10074
10478
  id: {
10075
10479
  defaultTitle: "Data Penumpang",
10076
10480
  passengerPrefix: "Penumpang"
@@ -10113,7 +10517,7 @@ var getBadgeConfig = (ticketClass) => {
10113
10517
  };
10114
10518
  }
10115
10519
  };
10116
- var useStyles24 = reactComponents.makeStyles({
10520
+ var useStyles25 = reactComponents.makeStyles({
10117
10521
  card: {
10118
10522
  padding: "1.5rem",
10119
10523
  borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -10196,8 +10600,8 @@ var CardPassengerList = ({
10196
10600
  labels,
10197
10601
  className
10198
10602
  }) => {
10199
- const styles = useStyles24();
10200
- const mergedLabels = { ...DEFAULT_LABELS23[language], ...labels };
10603
+ const styles = useStyles25();
10604
+ const mergedLabels = { ...DEFAULT_LABELS24[language], ...labels };
10201
10605
  const displayTitle = title || mergedLabels.defaultTitle;
10202
10606
  return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: className || styles.card, children: [
10203
10607
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
@@ -10270,7 +10674,7 @@ var CardPassengerList = ({
10270
10674
  };
10271
10675
 
10272
10676
  // src/components/CardVehicleDetail/CardVehicleDetail.constants.ts
10273
- var DEFAULT_LABELS24 = {
10677
+ var DEFAULT_LABELS25 = {
10274
10678
  id: {
10275
10679
  title: "Detail Kendaraan",
10276
10680
  vehicleNumberLabel: "Nomor Kendaraan",
@@ -10288,7 +10692,7 @@ var DEFAULT_LABELS24 = {
10288
10692
  noLabel: "No"
10289
10693
  }
10290
10694
  };
10291
- var useStyles25 = reactComponents.makeStyles({
10695
+ var useStyles26 = reactComponents.makeStyles({
10292
10696
  card: {
10293
10697
  padding: "1.5rem",
10294
10698
  borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -10328,8 +10732,8 @@ var CardVehicleDetail = ({
10328
10732
  language = "id",
10329
10733
  labels
10330
10734
  }) => {
10331
- const styles = useStyles25();
10332
- const mergedLabels = { ...DEFAULT_LABELS24[language], ...labels };
10735
+ const styles = useStyles26();
10736
+ const mergedLabels = { ...DEFAULT_LABELS25[language], ...labels };
10333
10737
  return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.card, children: [
10334
10738
  /* @__PURE__ */ jsxRuntime.jsxs(
10335
10739
  "div",
@@ -10391,7 +10795,7 @@ var CardVehicleDetail = ({
10391
10795
  };
10392
10796
 
10393
10797
  // src/components/CardVehicleOwnerForm/CardVehicleOwnerForm.constants.ts
10394
- var DEFAULT_LABELS25 = {
10798
+ var DEFAULT_LABELS26 = {
10395
10799
  id: {
10396
10800
  title: "Informasi Pemilik & Muatan",
10397
10801
  addOwnerButton: "Tambah Pemilik",
@@ -10499,7 +10903,7 @@ var DEFAULT_LABELS25 = {
10499
10903
  incrementQuantityAriaLabel: "Increase quantity"
10500
10904
  }
10501
10905
  };
10502
- var useStyles26 = reactComponents.makeStyles({
10906
+ var useStyles27 = reactComponents.makeStyles({
10503
10907
  card: {
10504
10908
  padding: "1.5rem",
10505
10909
  borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -10567,8 +10971,8 @@ var CardVehicleOwnerForm = ({
10567
10971
  language = "id",
10568
10972
  labels
10569
10973
  }) => {
10570
- const styles = useStyles26();
10571
- const mergedLabels = { ...DEFAULT_LABELS25[language], ...labels };
10974
+ const styles = useStyles27();
10975
+ const mergedLabels = { ...DEFAULT_LABELS26[language], ...labels };
10572
10976
  return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.card, children: [
10573
10977
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
10574
10978
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", flex: 1 }, children: [
@@ -11356,7 +11760,7 @@ var CardVehicleOwnerForm = ({
11356
11760
  };
11357
11761
 
11358
11762
  // src/components/CardBookingTicket/CardBookingTicket.constants.ts
11359
- var DEFAULT_LABELS26 = {
11763
+ var DEFAULT_LABELS27 = {
11360
11764
  id: {
11361
11765
  bookingDetails: "Booking Details",
11362
11766
  routeTitle: "Rute Perjalanan",
@@ -11392,7 +11796,7 @@ var DEFAULT_LABELS26 = {
11392
11796
  cancelDialogDismiss: "Cancel"
11393
11797
  }
11394
11798
  };
11395
- var useStyles27 = reactComponents.makeStyles({
11799
+ var useStyles28 = reactComponents.makeStyles({
11396
11800
  container: {
11397
11801
  display: "flex",
11398
11802
  flexDirection: "column",
@@ -11556,8 +11960,8 @@ var CardBookingTicket = ({
11556
11960
  onPrevious,
11557
11961
  className
11558
11962
  }) => {
11559
- const styles = useStyles27();
11560
- const mergedLabels = { ...DEFAULT_LABELS26[language], ...labels };
11963
+ const styles = useStyles28();
11964
+ const mergedLabels = { ...DEFAULT_LABELS27[language], ...labels };
11561
11965
  const [cancelDialogOpen, setCancelDialogOpen] = React.useState(false);
11562
11966
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.container} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.bookingDetail, children: [
11563
11967
  /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.bookingDetailTop, children: [
@@ -11759,7 +12163,7 @@ var CardBookingTicket = ({
11759
12163
  };
11760
12164
 
11761
12165
  // src/components/CardFAQ/CardFAQ.constants.ts
11762
- var DEFAULT_LABELS27 = {
12166
+ var DEFAULT_LABELS28 = {
11763
12167
  id: {
11764
12168
  title: "Pertanyaan yang sering diajukan"
11765
12169
  },
@@ -11813,7 +12217,7 @@ var DEFAULT_FAQ_ITEMS = {
11813
12217
  }
11814
12218
  ]
11815
12219
  };
11816
- var useStyles28 = reactComponents.makeStyles({
12220
+ var useStyles29 = reactComponents.makeStyles({
11817
12221
  faqSection: {
11818
12222
  // marginTop: '2rem', // Let parent control spacing if needed, or keep consistent
11819
12223
  },
@@ -11837,8 +12241,8 @@ var CardFAQ = ({
11837
12241
  items,
11838
12242
  className
11839
12243
  }) => {
11840
- const styles = useStyles28();
11841
- const mergedLabels = { ...DEFAULT_LABELS27[language], ...labels };
12244
+ const styles = useStyles29();
12245
+ const mergedLabels = { ...DEFAULT_LABELS28[language], ...labels };
11842
12246
  const faqItems = items || DEFAULT_FAQ_ITEMS[language];
11843
12247
  return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.faqCard, children: [
11844
12248
  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.title }),
@@ -11875,7 +12279,7 @@ var CardFAQ = ({
11875
12279
  };
11876
12280
 
11877
12281
  // src/components/CardAddon/CardAddon.constants.ts
11878
- var DEFAULT_LABELS28 = {
12282
+ var DEFAULT_LABELS29 = {
11879
12283
  id: {
11880
12284
  viewDetail: "Lihat detail",
11881
12285
  totalPrice: "Total Harga",
@@ -11891,7 +12295,7 @@ var DEFAULT_LABELS28 = {
11891
12295
  currencySymbol: "Rp"
11892
12296
  }
11893
12297
  };
11894
- var useStyles29 = reactComponents.makeStyles({
12298
+ var useStyles30 = reactComponents.makeStyles({
11895
12299
  card: {
11896
12300
  backgroundColor: reactComponents.tokens.colorNeutralBackground1,
11897
12301
  boxShadow: reactComponents.tokens.shadow4,
@@ -12064,8 +12468,8 @@ var CardAddon = ({
12064
12468
  children,
12065
12469
  className
12066
12470
  }) => {
12067
- const styles = useStyles29();
12068
- const mergedLabels = { ...DEFAULT_LABELS28[language], ...labels };
12471
+ const styles = useStyles30();
12472
+ const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
12069
12473
  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.gapRow, children: [
12070
12474
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.titleDivider, children: [
12071
12475
  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { className: styles.textTitle, children: title }),
@@ -12276,7 +12680,7 @@ var CardAddon = ({
12276
12680
  };
12277
12681
 
12278
12682
  // src/components/CardMealCatalog/CardMealCatalog.constants.ts
12279
- var DEFAULT_LABELS29 = {
12683
+ var DEFAULT_LABELS30 = {
12280
12684
  id: {
12281
12685
  addButton: "Tambah",
12282
12686
  currencySymbol: "Rp",
@@ -12292,7 +12696,7 @@ var DEFAULT_LABELS29 = {
12292
12696
  searchPlaceholder: "Search for food or drinks you want"
12293
12697
  }
12294
12698
  };
12295
- var useStyles30 = reactComponents.makeStyles({
12699
+ var useStyles31 = reactComponents.makeStyles({
12296
12700
  container: {
12297
12701
  display: "flex",
12298
12702
  flexDirection: "column",
@@ -12436,8 +12840,8 @@ var CardMealCatalog = ({
12436
12840
  searchValue,
12437
12841
  onSearchChange
12438
12842
  }) => {
12439
- const styles = useStyles30();
12440
- const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
12843
+ const styles = useStyles31();
12844
+ const mergedLabels = { ...DEFAULT_LABELS30[language], ...labels };
12441
12845
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
12442
12846
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.banner, children: [
12443
12847
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.bannerOverlay }),
@@ -12542,7 +12946,7 @@ var CardMealCatalog = ({
12542
12946
  };
12543
12947
 
12544
12948
  // src/components/CardReview/CardReview.constants.ts
12545
- var DEFAULT_LABELS30 = {
12949
+ var DEFAULT_LABELS31 = {
12546
12950
  id: {
12547
12951
  defaultTitle: "Tinjauan"
12548
12952
  },
@@ -12550,7 +12954,7 @@ var DEFAULT_LABELS30 = {
12550
12954
  defaultTitle: "Review"
12551
12955
  }
12552
12956
  };
12553
- var useStyles31 = reactComponents.makeStyles({
12957
+ var useStyles32 = reactComponents.makeStyles({
12554
12958
  card: {
12555
12959
  padding: "1.5rem",
12556
12960
  borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -12601,8 +13005,8 @@ var CardReview = ({
12601
13005
  className,
12602
13006
  headerAction
12603
13007
  }) => {
12604
- const styles = useStyles31();
12605
- const mergedLabels = { ...DEFAULT_LABELS30[language], ...labels };
13008
+ const styles = useStyles32();
13009
+ const mergedLabels = { ...DEFAULT_LABELS31[language], ...labels };
12606
13010
  return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: [
12607
13011
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
12608
13012
  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.headerTitle, children: title || mergedLabels.defaultTitle }),
@@ -12649,7 +13053,7 @@ var CardReview = ({
12649
13053
  };
12650
13054
 
12651
13055
  // src/components/CardReviewPassenger/CardReviewPassenger.constants.ts
12652
- var DEFAULT_LABELS31 = {
13056
+ var DEFAULT_LABELS32 = {
12653
13057
  id: {
12654
13058
  title: "Penumpang",
12655
13059
  idNumber: "Nomor ID"
@@ -12659,7 +13063,7 @@ var DEFAULT_LABELS31 = {
12659
13063
  idNumber: "ID Number"
12660
13064
  }
12661
13065
  };
12662
- var useStyles32 = reactComponents.makeStyles({
13066
+ var useStyles33 = reactComponents.makeStyles({
12663
13067
  card: {
12664
13068
  padding: "1.5rem",
12665
13069
  borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -12757,8 +13161,8 @@ var CardReviewPassenger = ({
12757
13161
  passengers,
12758
13162
  className
12759
13163
  }) => {
12760
- const styles = useStyles32();
12761
- const mergedLabels = { ...DEFAULT_LABELS31[language], ...labels };
13164
+ const styles = useStyles33();
13165
+ const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
12762
13166
  const displayTitle = title || mergedLabels.title;
12763
13167
  return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: [
12764
13168
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
@@ -12801,7 +13205,7 @@ var CardReviewPassenger = ({
12801
13205
  };
12802
13206
 
12803
13207
  // src/components/CardPriceDetails/CardPriceDetails.constants.ts
12804
- var DEFAULT_LABELS32 = {
13208
+ var DEFAULT_LABELS33 = {
12805
13209
  id: {
12806
13210
  defaultTitle: "Rincian Harga",
12807
13211
  totalPayment: "Total Pembayaran",
@@ -12837,7 +13241,7 @@ var DEFAULT_LABELS32 = {
12837
13241
  currencyPrefix: "Rp. "
12838
13242
  }
12839
13243
  };
12840
- var useStyles33 = reactComponents.makeStyles({
13244
+ var useStyles34 = reactComponents.makeStyles({
12841
13245
  list: {
12842
13246
  margin: 0,
12843
13247
  padding: 0,
@@ -12859,7 +13263,7 @@ var PriceDetailsTerms = ({
12859
13263
  language = "id",
12860
13264
  labels
12861
13265
  }) => {
12862
- const styles = useStyles33();
13266
+ const styles = useStyles34();
12863
13267
  const linkColor = reactComponents.tokens.colorBrandBackground;
12864
13268
  const bookingTerms = labels.bookingTerms;
12865
13269
  const agreementTerms = [
@@ -12879,7 +13283,7 @@ var PriceDetailsTerms = ({
12879
13283
  ] })
12880
13284
  ] });
12881
13285
  };
12882
- var useStyles34 = reactComponents.makeStyles({
13286
+ var useStyles35 = reactComponents.makeStyles({
12883
13287
  card: {
12884
13288
  padding: "1.5rem",
12885
13289
  borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -12956,8 +13360,8 @@ var CardPriceDetails = ({
12956
13360
  total,
12957
13361
  labels
12958
13362
  }) => {
12959
- const styles = useStyles34();
12960
- const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
13363
+ const styles = useStyles35();
13364
+ const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
12961
13365
  const displayTitle = title || mergedLabels.defaultTitle;
12962
13366
  const getVariantClass = (variant) => {
12963
13367
  switch (variant) {
@@ -13016,7 +13420,7 @@ var CardPriceDetails = ({
13016
13420
  };
13017
13421
 
13018
13422
  // src/components/CardPaymentMethodList/CardPaymentMethodList.constants.ts
13019
- var DEFAULT_LABELS33 = {
13423
+ var DEFAULT_LABELS34 = {
13020
13424
  id: {
13021
13425
  selectAriaLabel: "Pilih metode pembayaran"
13022
13426
  },
@@ -13024,7 +13428,7 @@ var DEFAULT_LABELS33 = {
13024
13428
  selectAriaLabel: "Select payment method"
13025
13429
  }
13026
13430
  };
13027
- var useStyles35 = reactComponents.makeStyles({
13431
+ var useStyles36 = reactComponents.makeStyles({
13028
13432
  container: {
13029
13433
  display: "flex",
13030
13434
  flexDirection: "column",
@@ -13084,8 +13488,8 @@ var CardPaymentMethodList = ({
13084
13488
  selectedValue,
13085
13489
  onSelect
13086
13490
  }) => {
13087
- const styles = useStyles35();
13088
- const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
13491
+ const styles = useStyles36();
13492
+ const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
13089
13493
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.container}`, children: methods.map((category, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
13090
13494
  index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}) }),
13091
13495
  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionItem, { value: category.value, children: [
@@ -13134,7 +13538,7 @@ var CardPaymentMethodList = ({
13134
13538
  };
13135
13539
 
13136
13540
  // src/components/CardPaymentGuide/CardPaymentGuide.constants.ts
13137
- var DEFAULT_LABELS34 = {
13541
+ var DEFAULT_LABELS35 = {
13138
13542
  id: {
13139
13543
  title: "Cara Pembayaran"
13140
13544
  },
@@ -13142,7 +13546,7 @@ var DEFAULT_LABELS34 = {
13142
13546
  title: "Payment Method"
13143
13547
  }
13144
13548
  };
13145
- var useStyles36 = reactComponents.makeStyles({
13549
+ var useStyles37 = reactComponents.makeStyles({
13146
13550
  container: {
13147
13551
  display: "flex",
13148
13552
  flexDirection: "column",
@@ -13179,8 +13583,8 @@ var CardPaymentGuide = ({
13179
13583
  guides,
13180
13584
  className
13181
13585
  }) => {
13182
- const styles = useStyles36();
13183
- const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
13586
+ const styles = useStyles37();
13587
+ const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
13184
13588
  const displayTitle = title || mergedLabels.title;
13185
13589
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
13186
13590
  title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.titleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.title, children: displayTitle }) }),
@@ -13199,14 +13603,15 @@ var CardPaymentGuide = ({
13199
13603
  };
13200
13604
 
13201
13605
  // src/components/CardPaymentInfo/CardPaymentInfo.constants.ts
13202
- var DEFAULT_LABELS35 = {
13606
+ var DEFAULT_LABELS36 = {
13203
13607
  id: {
13204
13608
  expiryPrefix: "Kode virtual akun berlaku sampai",
13205
13609
  copyCodeButton: "Salin Kode",
13206
13610
  totalPayment: "Total Pembayaran",
13207
13611
  checkStatusInfo: "Klik tombol dibawah ini jika sudah melakukan pembayaran",
13208
13612
  checkStatusButton: "Cek Status Pembayaran",
13209
- currencySymbol: "Rp."
13613
+ currencySymbol: "Rp.",
13614
+ changePayment: "Ubah Metode Pembayaran"
13210
13615
  },
13211
13616
  en: {
13212
13617
  expiryPrefix: "Virtual account code valid until",
@@ -13214,10 +13619,11 @@ var DEFAULT_LABELS35 = {
13214
13619
  totalPayment: "Total Payment",
13215
13620
  checkStatusInfo: "Click the button below if you have made the payment",
13216
13621
  checkStatusButton: "Check Payment Status",
13217
- currencySymbol: "Rp."
13622
+ currencySymbol: "Rp.",
13623
+ changePayment: "Change Payment Method"
13218
13624
  }
13219
13625
  };
13220
- var useStyles37 = reactComponents.makeStyles({
13626
+ var useStyles38 = reactComponents.makeStyles({
13221
13627
  container: {
13222
13628
  display: "flex",
13223
13629
  flexDirection: "column",
@@ -13297,10 +13703,11 @@ var CardPaymentInfo = ({
13297
13703
  totalAmount,
13298
13704
  guides,
13299
13705
  onCopyVA,
13300
- onCheckStatus
13706
+ onCheckStatus,
13707
+ onChangePayment
13301
13708
  }) => {
13302
- const styles = useStyles37();
13303
- const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
13709
+ const styles = useStyles38();
13710
+ const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
13304
13711
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
13305
13712
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
13306
13713
  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.expiryPrefix }),
@@ -13326,6 +13733,17 @@ var CardPaymentInfo = ({
13326
13733
  )
13327
13734
  ] })
13328
13735
  ] }),
13736
+ /* @__PURE__ */ jsxRuntime.jsx(
13737
+ reactComponents.Button,
13738
+ {
13739
+ appearance: "secondary",
13740
+ size: "large",
13741
+ shape: "circular",
13742
+ className: styles.checkStatusButton,
13743
+ onClick: onChangePayment,
13744
+ children: mergedLabels.changePayment
13745
+ }
13746
+ ),
13329
13747
  /* @__PURE__ */ jsxRuntime.jsx(
13330
13748
  reactComponents.Field,
13331
13749
  {
@@ -13334,7 +13752,9 @@ var CardPaymentInfo = ({
13334
13752
  children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Title2, { children: [
13335
13753
  mergedLabels.currencySymbol,
13336
13754
  " ",
13337
- totalAmount.toLocaleString(language === "id" ? "id-ID" : "en-US")
13755
+ totalAmount.toLocaleString(
13756
+ language === "id" ? "id-ID" : "en-US"
13757
+ )
13338
13758
  ] })
13339
13759
  }
13340
13760
  )
@@ -13358,7 +13778,7 @@ var CardPaymentInfo = ({
13358
13778
  };
13359
13779
 
13360
13780
  // src/components/CardStatusOrder/CardStatusOrder.constants.ts
13361
- var DEFAULT_LABELS36 = {
13781
+ var DEFAULT_LABELS37 = {
13362
13782
  id: {
13363
13783
  detailTitle: "Detail Pemesanan",
13364
13784
  statusLabel: "Status",
@@ -13388,7 +13808,7 @@ var DEFAULT_LABELS36 = {
13388
13808
  illustrationAlt: "E-Ticket Illustration"
13389
13809
  }
13390
13810
  };
13391
- var useStyles38 = reactComponents.makeStyles({
13811
+ var useStyles39 = reactComponents.makeStyles({
13392
13812
  activeCard: {
13393
13813
  width: "100%",
13394
13814
  // padding: tokens.spacingHorizontalNone, // default
@@ -13458,8 +13878,8 @@ var CardStatusOrder = ({
13458
13878
  onClickViewTicket,
13459
13879
  className
13460
13880
  }) => {
13461
- const styles = useStyles38();
13462
- const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
13881
+ const styles = useStyles39();
13882
+ const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
13463
13883
  const displayStatus = statusLabel || mergedLabels.defaultStatus;
13464
13884
  const displayTitle = title || mergedLabels.defaultTitle;
13465
13885
  const displayDescription = description || mergedLabels.defaultDescription;
@@ -13556,7 +13976,7 @@ var CardStatusOrder = ({
13556
13976
  };
13557
13977
 
13558
13978
  // src/components/ModalPriceDetail/ModalPriceDetail.constants.ts
13559
- var DEFAULT_LABELS37 = {
13979
+ var DEFAULT_LABELS38 = {
13560
13980
  id: {
13561
13981
  title: "Rincian Harga",
13562
13982
  addonHeader: "Add On",
@@ -13582,7 +14002,7 @@ var DEFAULT_LABELS37 = {
13582
14002
  closeAriaLabel: "Close"
13583
14003
  }
13584
14004
  };
13585
- var useStyles39 = reactComponents.makeStyles({
14005
+ var useStyles40 = reactComponents.makeStyles({
13586
14006
  surface: {
13587
14007
  width: "680px",
13588
14008
  maxWidth: "90vw",
@@ -13709,8 +14129,8 @@ var ModalPriceDetail = ({
13709
14129
  grandTotal,
13710
14130
  ...props
13711
14131
  }) => {
13712
- const styles = useStyles39();
13713
- const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
14132
+ const styles = useStyles40();
14133
+ const mergedLabels = { ...DEFAULT_LABELS38[language], ...labels };
13714
14134
  return /* @__PURE__ */ jsxRuntime.jsx(
13715
14135
  reactComponents.Dialog,
13716
14136
  {
@@ -13852,7 +14272,7 @@ var ModalPriceDetail = ({
13852
14272
  // src/components/FileUpload/FileUpload.constants.ts
13853
14273
  var ACCEPTED_FILES = ".pdf,.jpg,.jpeg,.png";
13854
14274
  var MAX_FILE_SIZE_MB = 10;
13855
- var DEFAULT_LABELS38 = {
14275
+ var DEFAULT_LABELS39 = {
13856
14276
  id: {
13857
14277
  placeholder: "Ketuk untuk pilih file",
13858
14278
  maxSizeWarning: "Maksimal {maxSize}MB per file dalam format PDF, JPG, JPEG, PNG.",
@@ -13870,7 +14290,7 @@ var DEFAULT_LABELS38 = {
13870
14290
  downloadTemplateDocument: "Download Template Document"
13871
14291
  }
13872
14292
  };
13873
- var useStyles40 = reactComponents.makeStyles({
14293
+ var useStyles41 = reactComponents.makeStyles({
13874
14294
  surface: {
13875
14295
  maxWidth: "90vw",
13876
14296
  maxHeight: "90vh",
@@ -13897,7 +14317,7 @@ var ModalPreviewImage = ({
13897
14317
  imageUrl,
13898
14318
  alt = "Preview"
13899
14319
  }) => {
13900
- const styles = useStyles40();
14320
+ const styles = useStyles41();
13901
14321
  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Dialog, { open, onOpenChange: (_, data) => onOpenChange(data.open), children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.surface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
13902
14322
  /* @__PURE__ */ jsxRuntime.jsx(
13903
14323
  reactComponents.DialogTitle,
@@ -14010,7 +14430,7 @@ var FileUpload = React__default.default.forwardRef(
14010
14430
  pdfIcon,
14011
14431
  downloadTemplateDocument = false
14012
14432
  }, ref) => {
14013
- const mergedLabels = { ...DEFAULT_LABELS38[language], ...customLabels };
14433
+ const mergedLabels = { ...DEFAULT_LABELS39[language], ...customLabels };
14014
14434
  const styles = uploadStyles();
14015
14435
  const fileInputRef = React.useRef(null);
14016
14436
  const [, setIsDragOver] = React.useState(false);
@@ -14448,11 +14868,11 @@ function hexToRgba(hex, alpha = 1) {
14448
14868
  }
14449
14869
 
14450
14870
  // src/components/CardProfileMenu/CardProfileMenu.constants.ts
14451
- var DEFAULT_LABELS39 = {
14871
+ var DEFAULT_LABELS40 = {
14452
14872
  id: {},
14453
14873
  en: {}
14454
14874
  };
14455
- var useStyles41 = reactComponents.makeStyles({
14875
+ var useStyles42 = reactComponents.makeStyles({
14456
14876
  container: {
14457
14877
  display: "flex",
14458
14878
  flexDirection: "column",
@@ -14512,8 +14932,8 @@ var CardProfileMenu = ({
14512
14932
  selectedValue,
14513
14933
  onTabSelect
14514
14934
  }) => {
14515
- const styles = useStyles41();
14516
- ({ ...DEFAULT_LABELS39[language], ...labels });
14935
+ const styles = useStyles42();
14936
+ ({ ...DEFAULT_LABELS40[language], ...labels });
14517
14937
  const handleTabSelect = (_, data) => {
14518
14938
  onTabSelect(data.value);
14519
14939
  };
@@ -14542,107 +14962,6 @@ var CardProfileMenu = ({
14542
14962
  ) });
14543
14963
  };
14544
14964
 
14545
- // src/components/NoContent/NoContent.constants.ts
14546
- var DEFAULT_LABELS40 = {
14547
- id: {
14548
- defaultImageAlt: "Tidak ada konten",
14549
- defaultTitle: "Data {konten} belum bisa dimuat",
14550
- defaultMessage: "Silahkan coba muat ulang halaman ini atau cek kembali beberapa saat lagi.",
14551
- defaultButtonText: "Muat Ulang"
14552
- },
14553
- en: {
14554
- defaultImageAlt: "No content available",
14555
- defaultTitle: "Data {content} could not be loaded",
14556
- defaultMessage: "Please try reloading this page or check back in a few moments.",
14557
- defaultButtonText: "Reload"
14558
- }
14559
- };
14560
- var getFormattedDefaultTitle = (template, content) => {
14561
- if (content) {
14562
- return template.replace(/\{(konten|content)\}/g, content);
14563
- }
14564
- return template.replace(/\s*\{(konten|content)\}\s*/g, " ").trim();
14565
- };
14566
- var useStyles42 = reactComponents.makeStyles({
14567
- root: {
14568
- display: "flex",
14569
- flexDirection: "column",
14570
- alignItems: "center",
14571
- justifyContent: "center",
14572
- gap: reactComponents.tokens.spacingVerticalL,
14573
- textAlign: "center",
14574
- paddingTop: reactComponents.tokens.spacingVerticalXXL,
14575
- paddingBottom: reactComponents.tokens.spacingVerticalXXL,
14576
- paddingLeft: reactComponents.tokens.spacingHorizontalXL,
14577
- paddingRight: reactComponents.tokens.spacingHorizontalXL,
14578
- width: "100%"
14579
- },
14580
- image: {
14581
- maxWidth: "100%",
14582
- height: "auto"
14583
- },
14584
- textContainer: {
14585
- display: "flex",
14586
- flexDirection: "column",
14587
- alignItems: "center",
14588
- gap: reactComponents.tokens.spacingVerticalS,
14589
- maxWidth: "400px"
14590
- },
14591
- title: {
14592
- fontWeight: "600"
14593
- },
14594
- message: {
14595
- color: reactComponents.tokens.colorNeutralForeground3,
14596
- textAlign: "center"
14597
- }
14598
- });
14599
- var NoContent = ({
14600
- title,
14601
- content,
14602
- message,
14603
- imageSrc = "/assets/images/illustrations/no-content.svg",
14604
- imageAlt,
14605
- imageWidth = 240,
14606
- imageHeight = 180,
14607
- actionButton,
14608
- language = "id",
14609
- labels,
14610
- className
14611
- }) => {
14612
- const styles = useStyles42();
14613
- const mergedLabels = { ...DEFAULT_LABELS40[language], ...labels };
14614
- const displayTitle = title ?? getFormattedDefaultTitle(mergedLabels.defaultTitle, content);
14615
- const displayMessage = message ?? mergedLabels.defaultMessage;
14616
- const displayImageAlt = imageAlt ?? mergedLabels.defaultImageAlt;
14617
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reactComponents.mergeClasses(styles.root, className), children: [
14618
- /* @__PURE__ */ jsxRuntime.jsx(
14619
- "img",
14620
- {
14621
- src: imageSrc,
14622
- alt: displayImageAlt,
14623
- width: imageWidth,
14624
- height: imageHeight,
14625
- className: styles.image
14626
- }
14627
- ),
14628
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContainer, children: [
14629
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.title, children: displayTitle }),
14630
- typeof displayMessage === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.message, children: displayMessage }) : displayMessage
14631
- ] }),
14632
- actionButton && /* @__PURE__ */ jsxRuntime.jsx(
14633
- reactComponents.Button,
14634
- {
14635
- type: "button",
14636
- appearance: actionButton.appearance || "primary",
14637
- onClick: actionButton.onClick,
14638
- shape: "circular",
14639
- style: { width: "100%" },
14640
- children: actionButton.text
14641
- }
14642
- )
14643
- ] });
14644
- };
14645
-
14646
14965
  exports.API_CONFIG = API_CONFIG;
14647
14966
  exports.API_ENDPOINTS = API_ENDPOINTS;
14648
14967
  exports.API_ERROR_MESSAGES = API_ERROR_MESSAGES;
@@ -14682,7 +15001,9 @@ exports.DEFAULT_SORT_OPTIONS = DEFAULT_SORT_OPTIONS;
14682
15001
  exports.DEFAULT_TIME_SLOTS = DEFAULT_TIME_SLOTS;
14683
15002
  exports.DEFAULT_VEHICLE_ICONS = DEFAULT_VEHICLE_ICONS;
14684
15003
  exports.DateFilter = DateFilter;
14685
- exports.DateFilterDefaultLabels = DEFAULT_LABELS17;
15004
+ exports.DateFilterDefaultLabels = DEFAULT_LABELS18;
15005
+ exports.EmptyContent = EmptyContent;
15006
+ exports.EmptyContentDefaultLabels = DEFAULT_LABELS11;
14686
15007
  exports.FileUpload = FileUpload_default;
14687
15008
  exports.GENDER = GENDER;
14688
15009
  exports.HTTP_STATUS = HTTP_STATUS;
@@ -14693,7 +15014,7 @@ exports.MODAL_PRESETS = MODAL_PRESETS;
14693
15014
  exports.MY_TICKET_STATUS = MY_TICKET_STATUS;
14694
15015
  exports.MY_TICKET_TAB = MY_TICKET_TAB;
14695
15016
  exports.ModalFilterTicket = ModalFilterTicket;
14696
- exports.ModalFilterTicketDefaultLabels = DEFAULT_LABELS16;
15017
+ exports.ModalFilterTicketDefaultLabels = DEFAULT_LABELS17;
14697
15018
  exports.ModalIllustration = ModalIllustration;
14698
15019
  exports.ModalListMenuService = ModalListMenuService;
14699
15020
  exports.ModalListPassenger = ModalListPassenger;
@@ -14706,8 +15027,6 @@ exports.ModalSelectDate = ModalSelectDate;
14706
15027
  exports.ModalService = ModalService;
14707
15028
  exports.ModalTotalPassengers = ModalTotalPassengers;
14708
15029
  exports.ModalTypeOfService = ModalTypeOfService;
14709
- exports.NoContent = NoContent;
14710
- exports.NoContentDefaultLabels = DEFAULT_LABELS40;
14711
15030
  exports.PASSENGER_TYPE = PASSENGER_TYPE;
14712
15031
  exports.SortMenu = SortMenu;
14713
15032
  exports.Stepper = Stepper;