@asdp/ferryui 0.1.22-dev.10665 → 0.1.22-dev.10687
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 +31 -0
- package/dist/index.d.ts +31 -0
- package/dist/index.js +867 -123
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +868 -124
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, InfoLabel, Body1, Body1Strong, Caption1, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Spinner, Label, Text, Subtitle1, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Menu, MenuTrigger, MenuPopover, MenuList, Radio, DialogActions, Caption2Strong, Link, Body2, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, typographyStyles, Switch, Textarea } from '@fluentui/react-components';
|
|
2
2
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import React, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
|
|
4
|
-
import { ArrowDownloadRegular, Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular } from '@fluentui/react-icons';
|
|
4
|
+
import { ArrowDownloadRegular, Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular, ArrowRightRegular } from '@fluentui/react-icons';
|
|
5
5
|
import { Container, Row, Col, Visible } from 'react-grid-system';
|
|
6
6
|
import { Icon } from '@iconify/react';
|
|
7
7
|
import { Controller, useForm, useWatch } from 'react-hook-form';
|
|
@@ -278,11 +278,13 @@ var sharedColors = {
|
|
|
278
278
|
"Shared_Green_Primary": "#107c10",
|
|
279
279
|
"Shared_Lilac_Primary": "#b146c2",
|
|
280
280
|
"Shared_Lilac_Tint_40": "#e6bfed",
|
|
281
|
-
"Shared_Lilac_Tint_60": "#fcf6fd"
|
|
281
|
+
"Shared_Lilac_Tint_60": "#fcf6fd",
|
|
282
|
+
"Shared_Secondary_Primary": "#5C9F38"};
|
|
282
283
|
var foundationColors = {
|
|
283
284
|
"Foundation_Danger_error": "#FD3A3A"
|
|
284
285
|
};
|
|
285
286
|
var lightModeColors = {
|
|
287
|
+
"Neutral_Background_1_Hover": "#f5f5f5",
|
|
286
288
|
"Neutral_Background_2_Hover": "#f0f0f0",
|
|
287
289
|
"Neutral_Background_3_Pressed": "#d6d6d6",
|
|
288
290
|
"Neutral_Foreground_Disabled_Rest": "#bdbdbd",
|
|
@@ -12787,6 +12789,10 @@ var DEFAULT_LABELS26 = {
|
|
|
12787
12789
|
industryTypeOthersLabel: "Jenis Industri Lainnya",
|
|
12788
12790
|
industryTypeOthersPlaceholder: "Masukkan Jenis Industri",
|
|
12789
12791
|
cargoCategoryLabel: "Kategori Muatan",
|
|
12792
|
+
estimatedLooseCargoLabel: "Estimasi Berat Barang Lepas",
|
|
12793
|
+
estimatedLooseCargoWeightPlaceholder: "Masukkan Berat (Ton)",
|
|
12794
|
+
estimatedLooseCargoQuantityLabel: "Jumlah Karung",
|
|
12795
|
+
estimatedLooseCargoUnitLabel: "Karung",
|
|
12790
12796
|
deleteCargoButton: "Hapus Muatan",
|
|
12791
12797
|
addCargoButton: "Tambah Muatan",
|
|
12792
12798
|
loadTypeOptions: {
|
|
@@ -12843,6 +12849,10 @@ var DEFAULT_LABELS26 = {
|
|
|
12843
12849
|
industryTypeOthersLabel: "Other Industry Type",
|
|
12844
12850
|
industryTypeOthersPlaceholder: "Enter Industry Type",
|
|
12845
12851
|
cargoCategoryLabel: "Cargo Category",
|
|
12852
|
+
estimatedLooseCargoLabel: "Estimated Loose Cargo Weight",
|
|
12853
|
+
estimatedLooseCargoWeightPlaceholder: "Enter Weight (Ton)",
|
|
12854
|
+
estimatedLooseCargoQuantityLabel: "Number of Bags",
|
|
12855
|
+
estimatedLooseCargoUnitLabel: "Bags",
|
|
12846
12856
|
deleteCargoButton: "Delete Cargo",
|
|
12847
12857
|
addCargoButton: "Add Cargo",
|
|
12848
12858
|
loadTypeOptions: {
|
|
@@ -13441,6 +13451,9 @@ var CardVehicleOwnerForm = ({
|
|
|
13441
13451
|
const watchIndustryType = watch(
|
|
13442
13452
|
`owners.${index}.cargo.${cargoIndex}.industryType`
|
|
13443
13453
|
);
|
|
13454
|
+
const watchQuantity = watch(
|
|
13455
|
+
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
13456
|
+
);
|
|
13444
13457
|
let _loadTypeOptions = [];
|
|
13445
13458
|
if (watchCommodity && loadTypeOptionsByCommodityId[watchCommodity]) {
|
|
13446
13459
|
_loadTypeOptions = loadTypeOptionsByCommodityId[watchCommodity];
|
|
@@ -13450,6 +13463,9 @@ var CardVehicleOwnerForm = ({
|
|
|
13450
13463
|
label: `${lt.name}${lt.unit?.name ? ` (${lt.unit.name})` : ""}`
|
|
13451
13464
|
}));
|
|
13452
13465
|
}
|
|
13466
|
+
const _selectedLoadType = loadTypes.find(
|
|
13467
|
+
(loadType) => loadType.id.toString() === watchLoadType
|
|
13468
|
+
);
|
|
13453
13469
|
const isLoadTypeOther = _loadTypeOptions.find(
|
|
13454
13470
|
(lt) => lt.value.toString() === String(watchLoadType)
|
|
13455
13471
|
)?.label.startsWith(
|
|
@@ -13717,13 +13733,295 @@ var CardVehicleOwnerForm = ({
|
|
|
13717
13733
|
)
|
|
13718
13734
|
] })
|
|
13719
13735
|
] }),
|
|
13736
|
+
/* @__PURE__ */ jsxs(Row, { children: [
|
|
13737
|
+
/* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.estimatedLooseCargoLabel }) }),
|
|
13738
|
+
/* @__PURE__ */ jsx(Col, { md: 12, children: /* @__PURE__ */ jsx(
|
|
13739
|
+
InputDynamic_default,
|
|
13740
|
+
{
|
|
13741
|
+
control,
|
|
13742
|
+
disabled,
|
|
13743
|
+
name: `owners.${index}.cargo.${cargoIndex}.cargoWeight`,
|
|
13744
|
+
placeholder: mergedLabels.estimatedLooseCargoWeightPlaceholder,
|
|
13745
|
+
size: "large",
|
|
13746
|
+
type: "number",
|
|
13747
|
+
step: "1",
|
|
13748
|
+
onChange: (val) => {
|
|
13749
|
+
setValue(
|
|
13750
|
+
`owners.${index}.cargo.${cargoIndex}.cargoWeight`,
|
|
13751
|
+
val ? Number(val) : 0
|
|
13752
|
+
);
|
|
13753
|
+
const updatedCargoItems = owner.cargoItems?.map(
|
|
13754
|
+
(c, cIdx) => cIdx === cargoIndex ? {
|
|
13755
|
+
...c,
|
|
13756
|
+
estimatedLooseCargoWeight: val ? Number(val) : 0
|
|
13757
|
+
} : c
|
|
13758
|
+
);
|
|
13759
|
+
onUpdateOwner(owner.id, {
|
|
13760
|
+
cargoItems: updatedCargoItems
|
|
13761
|
+
});
|
|
13762
|
+
},
|
|
13763
|
+
contentAfter: /* @__PURE__ */ jsx(
|
|
13764
|
+
"div",
|
|
13765
|
+
{
|
|
13766
|
+
style: {
|
|
13767
|
+
paddingRight: "12px",
|
|
13768
|
+
color: tokens.colorNeutralForeground1,
|
|
13769
|
+
fontSize: tokens.fontSizeBase300
|
|
13770
|
+
},
|
|
13771
|
+
children: "Ton"
|
|
13772
|
+
}
|
|
13773
|
+
)
|
|
13774
|
+
}
|
|
13775
|
+
) })
|
|
13776
|
+
] }),
|
|
13777
|
+
/* @__PURE__ */ jsxs(Row, { children: [
|
|
13778
|
+
/* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.estimatedLooseCargoQuantityLabel }) }),
|
|
13779
|
+
/* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsxs(
|
|
13780
|
+
"div",
|
|
13781
|
+
{
|
|
13782
|
+
style: {
|
|
13783
|
+
display: "flex",
|
|
13784
|
+
alignItems: "center",
|
|
13785
|
+
border: `1px solid ${tokens.colorNeutralStroke1}`,
|
|
13786
|
+
borderRadius: tokens.borderRadiusMedium,
|
|
13787
|
+
height: "40px",
|
|
13788
|
+
padding: "0 12px",
|
|
13789
|
+
backgroundColor: tokens.colorNeutralBackground1
|
|
13790
|
+
},
|
|
13791
|
+
children: [
|
|
13792
|
+
/* @__PURE__ */ jsx("div", { style: { flex: 0.5 } }),
|
|
13793
|
+
/* @__PURE__ */ jsxs(
|
|
13794
|
+
"div",
|
|
13795
|
+
{
|
|
13796
|
+
style: {
|
|
13797
|
+
display: "flex",
|
|
13798
|
+
alignItems: "center",
|
|
13799
|
+
gap: "12px"
|
|
13800
|
+
},
|
|
13801
|
+
children: [
|
|
13802
|
+
/* @__PURE__ */ jsx(
|
|
13803
|
+
Button,
|
|
13804
|
+
{
|
|
13805
|
+
appearance: "transparent",
|
|
13806
|
+
disabled,
|
|
13807
|
+
icon: /* @__PURE__ */ jsx(
|
|
13808
|
+
Icon,
|
|
13809
|
+
{
|
|
13810
|
+
icon: "fluent:subtract-circle-24-regular",
|
|
13811
|
+
style: {
|
|
13812
|
+
fontSize: "24px",
|
|
13813
|
+
color: tokens.colorNeutralForeground4
|
|
13814
|
+
}
|
|
13815
|
+
}
|
|
13816
|
+
),
|
|
13817
|
+
"aria-label": mergedLabels.decrementQuantityAriaLabel,
|
|
13818
|
+
size: "small",
|
|
13819
|
+
onClick: () => {
|
|
13820
|
+
const currentVal = getValues(
|
|
13821
|
+
`owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`
|
|
13822
|
+
) || 0;
|
|
13823
|
+
const currentQty = Number(currentVal);
|
|
13824
|
+
if (currentQty > 0) {
|
|
13825
|
+
const newVal = currentQty - 1;
|
|
13826
|
+
setValue(
|
|
13827
|
+
`owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`,
|
|
13828
|
+
newVal
|
|
13829
|
+
);
|
|
13830
|
+
const updatedCargoItems = owner.cargoItems?.map(
|
|
13831
|
+
(c, cIdx) => cIdx === cargoIndex ? {
|
|
13832
|
+
...c,
|
|
13833
|
+
estimatedLooseCargoQuantity: newVal
|
|
13834
|
+
} : c
|
|
13835
|
+
);
|
|
13836
|
+
onUpdateOwner(owner.id, {
|
|
13837
|
+
cargoItems: updatedCargoItems
|
|
13838
|
+
});
|
|
13839
|
+
}
|
|
13840
|
+
},
|
|
13841
|
+
style: {
|
|
13842
|
+
minWidth: "32px",
|
|
13843
|
+
padding: "0"
|
|
13844
|
+
}
|
|
13845
|
+
}
|
|
13846
|
+
),
|
|
13847
|
+
/* @__PURE__ */ jsx("div", { style: { width: "40px" }, children: /* @__PURE__ */ jsx(
|
|
13848
|
+
Controller,
|
|
13849
|
+
{
|
|
13850
|
+
name: `owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`,
|
|
13851
|
+
control,
|
|
13852
|
+
disabled,
|
|
13853
|
+
render: ({ field }) => /* @__PURE__ */ jsx(
|
|
13854
|
+
"input",
|
|
13855
|
+
{
|
|
13856
|
+
...field,
|
|
13857
|
+
min: 0,
|
|
13858
|
+
step: "1",
|
|
13859
|
+
type: "number",
|
|
13860
|
+
style: {
|
|
13861
|
+
border: "none",
|
|
13862
|
+
width: "100%",
|
|
13863
|
+
textAlign: "center",
|
|
13864
|
+
outline: "none",
|
|
13865
|
+
backgroundColor: "transparent",
|
|
13866
|
+
color: tokens.colorNeutralForeground1,
|
|
13867
|
+
fontSize: tokens.fontSizeBase400,
|
|
13868
|
+
fontFamily: tokens.fontFamilyBase
|
|
13869
|
+
},
|
|
13870
|
+
onKeyDown: (e) => {
|
|
13871
|
+
if ([
|
|
13872
|
+
"e",
|
|
13873
|
+
"E",
|
|
13874
|
+
"+",
|
|
13875
|
+
"-",
|
|
13876
|
+
".",
|
|
13877
|
+
","
|
|
13878
|
+
].includes(e.key)) {
|
|
13879
|
+
e.preventDefault();
|
|
13880
|
+
}
|
|
13881
|
+
},
|
|
13882
|
+
onPaste: (e) => {
|
|
13883
|
+
const paste = e.clipboardData.getData(
|
|
13884
|
+
"text"
|
|
13885
|
+
);
|
|
13886
|
+
if (!/^\d+$/.test(paste)) {
|
|
13887
|
+
e.preventDefault();
|
|
13888
|
+
}
|
|
13889
|
+
},
|
|
13890
|
+
onWheel: (e) => e.target.blur(),
|
|
13891
|
+
onChange: (e) => {
|
|
13892
|
+
const newVal = Number(
|
|
13893
|
+
e.target.value
|
|
13894
|
+
);
|
|
13895
|
+
field.onChange(e);
|
|
13896
|
+
const updatedCargoItems = owner.cargoItems?.map(
|
|
13897
|
+
(c, cIdx) => cIdx === cargoIndex ? {
|
|
13898
|
+
...c,
|
|
13899
|
+
estimatedLooseCargoQuantity: newVal
|
|
13900
|
+
} : c
|
|
13901
|
+
);
|
|
13902
|
+
onUpdateOwner(owner.id, {
|
|
13903
|
+
cargoItems: updatedCargoItems
|
|
13904
|
+
});
|
|
13905
|
+
}
|
|
13906
|
+
}
|
|
13907
|
+
),
|
|
13908
|
+
rules: {
|
|
13909
|
+
validate: (val) => Number(val) >= 0
|
|
13910
|
+
}
|
|
13911
|
+
}
|
|
13912
|
+
) }),
|
|
13913
|
+
/* @__PURE__ */ jsx(
|
|
13914
|
+
Button,
|
|
13915
|
+
{
|
|
13916
|
+
appearance: "transparent",
|
|
13917
|
+
disabled,
|
|
13918
|
+
icon: /* @__PURE__ */ jsx(
|
|
13919
|
+
Icon,
|
|
13920
|
+
{
|
|
13921
|
+
icon: "fluent:add-circle-24-regular",
|
|
13922
|
+
style: {
|
|
13923
|
+
fontSize: "24px",
|
|
13924
|
+
color: tokens.colorBrandStroke1
|
|
13925
|
+
}
|
|
13926
|
+
}
|
|
13927
|
+
),
|
|
13928
|
+
"aria-label": mergedLabels.incrementQuantityAriaLabel,
|
|
13929
|
+
size: "small",
|
|
13930
|
+
onClick: () => {
|
|
13931
|
+
const currentVal = getValues(
|
|
13932
|
+
`owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`
|
|
13933
|
+
) || 0;
|
|
13934
|
+
const currentQty = Number(currentVal);
|
|
13935
|
+
const newVal = currentQty + 1;
|
|
13936
|
+
setValue(
|
|
13937
|
+
`owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`,
|
|
13938
|
+
newVal
|
|
13939
|
+
);
|
|
13940
|
+
const updatedCargoItems = owner.cargoItems?.map(
|
|
13941
|
+
(c, cIdx) => cIdx === cargoIndex ? {
|
|
13942
|
+
...c,
|
|
13943
|
+
estimatedLooseCargoQuantity: newVal
|
|
13944
|
+
} : c
|
|
13945
|
+
);
|
|
13946
|
+
onUpdateOwner(owner.id, {
|
|
13947
|
+
cargoItems: updatedCargoItems
|
|
13948
|
+
});
|
|
13949
|
+
},
|
|
13950
|
+
style: {
|
|
13951
|
+
minWidth: "32px",
|
|
13952
|
+
padding: "0"
|
|
13953
|
+
}
|
|
13954
|
+
}
|
|
13955
|
+
)
|
|
13956
|
+
]
|
|
13957
|
+
}
|
|
13958
|
+
),
|
|
13959
|
+
/* @__PURE__ */ jsx(
|
|
13960
|
+
"div",
|
|
13961
|
+
{
|
|
13962
|
+
style: {
|
|
13963
|
+
flex: 1,
|
|
13964
|
+
textAlign: "left",
|
|
13965
|
+
color: tokens.colorNeutralForeground1,
|
|
13966
|
+
fontSize: tokens.fontSizeBase300,
|
|
13967
|
+
paddingRight: "8px"
|
|
13968
|
+
},
|
|
13969
|
+
children: mergedLabels.estimatedLooseCargoUnitLabel
|
|
13970
|
+
}
|
|
13971
|
+
)
|
|
13972
|
+
]
|
|
13973
|
+
}
|
|
13974
|
+
) })
|
|
13975
|
+
] }),
|
|
13976
|
+
/* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Col, { lg: 12, children: [
|
|
13977
|
+
/* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.priceLabel }),
|
|
13978
|
+
/* @__PURE__ */ jsx(
|
|
13979
|
+
Body2,
|
|
13980
|
+
{
|
|
13981
|
+
style: { marginTop: "0.5rem" },
|
|
13982
|
+
children: /* @__PURE__ */ jsxs(Row, { children: [
|
|
13983
|
+
/* @__PURE__ */ jsx(Col, { xl: 6, children: /* @__PURE__ */ jsxs(Body1Strong, { children: [
|
|
13984
|
+
watch(
|
|
13985
|
+
`owners.${index}.cargo.${cargoIndex}.commodity`
|
|
13986
|
+
) || "Komoditas",
|
|
13987
|
+
" ",
|
|
13988
|
+
"\u2022 ",
|
|
13989
|
+
watch(
|
|
13990
|
+
`owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`
|
|
13991
|
+
) || 0,
|
|
13992
|
+
"x",
|
|
13993
|
+
" ",
|
|
13994
|
+
mergedLabels.estimatedLooseCargoUnitLabel,
|
|
13995
|
+
" ",
|
|
13996
|
+
"\u2022 IDR. 15,000"
|
|
13997
|
+
] }) }),
|
|
13998
|
+
/* @__PURE__ */ jsx(
|
|
13999
|
+
Col,
|
|
14000
|
+
{
|
|
14001
|
+
xl: 6,
|
|
14002
|
+
style: {
|
|
14003
|
+
color: sharedColors["Shared_Secondary_Primary"],
|
|
14004
|
+
textAlign: "right"
|
|
14005
|
+
},
|
|
14006
|
+
children: /* @__PURE__ */ jsx(Body1Stronger, { children: new Intl.NumberFormat(
|
|
14007
|
+
"id-ID",
|
|
14008
|
+
{
|
|
14009
|
+
style: "currency",
|
|
14010
|
+
currency: "IDR",
|
|
14011
|
+
minimumFractionDigits: 0
|
|
14012
|
+
}
|
|
14013
|
+
).format(
|
|
14014
|
+
(watch(
|
|
14015
|
+
`owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`
|
|
14016
|
+
) || 0) * 15e3
|
|
14017
|
+
) })
|
|
14018
|
+
}
|
|
14019
|
+
)
|
|
14020
|
+
] })
|
|
14021
|
+
}
|
|
14022
|
+
)
|
|
14023
|
+
] }) }),
|
|
13720
14024
|
(() => {
|
|
13721
|
-
const type = watch(
|
|
13722
|
-
`owners.${index}.cargo.${cargoIndex}.loadType`
|
|
13723
|
-
);
|
|
13724
|
-
const _selectedLoadType = loadTypes.find(
|
|
13725
|
-
(loadType) => loadType.id.toString() === type
|
|
13726
|
-
);
|
|
13727
14025
|
if (!_selectedLoadType) return null;
|
|
13728
14026
|
return /* @__PURE__ */ jsxs(Row, { children: [
|
|
13729
14027
|
/* @__PURE__ */ jsxs(Col, { md: 12, children: [
|
|
@@ -13908,11 +14206,11 @@ var CardVehicleOwnerForm = ({
|
|
|
13908
14206
|
paddingRight: "8px"
|
|
13909
14207
|
},
|
|
13910
14208
|
children: (() => {
|
|
13911
|
-
const
|
|
14209
|
+
const type = watch(
|
|
13912
14210
|
`owners.${index}.cargo.${cargoIndex}.loadType`
|
|
13913
14211
|
);
|
|
13914
14212
|
const selectedLoadType2 = loadTypes.find(
|
|
13915
|
-
(loadType) => loadType.id.toString() ===
|
|
14213
|
+
(loadType) => loadType.id.toString() === type
|
|
13916
14214
|
);
|
|
13917
14215
|
return selectedLoadType2?.unit?.name;
|
|
13918
14216
|
})()
|
|
@@ -13929,22 +14227,42 @@ var CardVehicleOwnerForm = ({
|
|
|
13929
14227
|
Body2,
|
|
13930
14228
|
{
|
|
13931
14229
|
style: { marginTop: "0.5rem" },
|
|
13932
|
-
children: (
|
|
13933
|
-
|
|
13934
|
-
|
|
14230
|
+
children: /* @__PURE__ */ jsxs(Row, { children: [
|
|
14231
|
+
/* @__PURE__ */ jsx(Col, { xl: 6, children: /* @__PURE__ */ jsxs(Body1Strong, { children: [
|
|
14232
|
+
_selectedLoadType.name,
|
|
14233
|
+
" \u2022",
|
|
14234
|
+
" ",
|
|
14235
|
+
watchQuantity,
|
|
14236
|
+
"x",
|
|
14237
|
+
" ",
|
|
14238
|
+
_selectedLoadType.unit?.name,
|
|
14239
|
+
" ",
|
|
14240
|
+
"\u2022",
|
|
14241
|
+
" ",
|
|
14242
|
+
_selectedLoadType.formattedPrice
|
|
14243
|
+
] }) }),
|
|
14244
|
+
/* @__PURE__ */ jsx(
|
|
14245
|
+
Col,
|
|
13935
14246
|
{
|
|
13936
|
-
|
|
13937
|
-
|
|
13938
|
-
|
|
14247
|
+
xl: 6,
|
|
14248
|
+
style: { color: sharedColors["Shared_Secondary_Primary"], textAlign: "right" },
|
|
14249
|
+
children: /* @__PURE__ */ jsx(Body1Stronger, { children: new Intl.NumberFormat(
|
|
14250
|
+
"id-ID",
|
|
14251
|
+
{
|
|
14252
|
+
style: "currency",
|
|
14253
|
+
currency: "IDR",
|
|
14254
|
+
minimumFractionDigits: 0
|
|
14255
|
+
}
|
|
14256
|
+
).format(
|
|
14257
|
+
Number(
|
|
14258
|
+
getValues(
|
|
14259
|
+
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
14260
|
+
) || 0
|
|
14261
|
+
) * (_selectedLoadType.price || 0)
|
|
14262
|
+
) })
|
|
13939
14263
|
}
|
|
13940
|
-
)
|
|
13941
|
-
|
|
13942
|
-
getValues(
|
|
13943
|
-
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
13944
|
-
) || 0
|
|
13945
|
-
) * (_selectedLoadType?.price || 0)
|
|
13946
|
-
);
|
|
13947
|
-
})()
|
|
14264
|
+
)
|
|
14265
|
+
] })
|
|
13948
14266
|
}
|
|
13949
14267
|
)
|
|
13950
14268
|
] })
|
|
@@ -16838,10 +17156,13 @@ var CardStatusOrder = ({
|
|
|
16838
17156
|
var DEFAULT_LABELS40 = {
|
|
16839
17157
|
id: {
|
|
16840
17158
|
title: "Rincian Harga",
|
|
17159
|
+
passengerDetailHeader: "Detail Penumpang",
|
|
16841
17160
|
addonHeader: "Add On",
|
|
17161
|
+
departureFareHeader: "Tarif Keberangkatan",
|
|
16842
17162
|
subTotalLabel: "Sub Tagihan",
|
|
16843
|
-
|
|
16844
|
-
|
|
17163
|
+
discountLabel: "Discount Reduksi",
|
|
17164
|
+
totalTagihanLabel: "Total Tagihan (Subtotal - Reduksi)",
|
|
17165
|
+
ppnLabel: "PPN 11%",
|
|
16845
17166
|
ppnNote: "*PPN 11% dikenakan untuk biaya layanan dan biaya admin",
|
|
16846
17167
|
grandTotalLabel: "Total Pembayaran",
|
|
16847
17168
|
currencyPrefix: "Rp.",
|
|
@@ -16850,10 +17171,13 @@ var DEFAULT_LABELS40 = {
|
|
|
16850
17171
|
},
|
|
16851
17172
|
en: {
|
|
16852
17173
|
title: "Price Details",
|
|
17174
|
+
passengerDetailHeader: "Passenger Details",
|
|
16853
17175
|
addonHeader: "Add On",
|
|
17176
|
+
departureFareHeader: "Departure Fare",
|
|
16854
17177
|
subTotalLabel: "Sub Total",
|
|
16855
|
-
|
|
16856
|
-
|
|
17178
|
+
discountLabel: "Discount Reduction",
|
|
17179
|
+
totalTagihanLabel: "Total Bill (Subtotal - Reduction)",
|
|
17180
|
+
ppnLabel: "VAT 11%",
|
|
16857
17181
|
ppnNote: "*VAT 11% is charged for service fees and admin fees",
|
|
16858
17182
|
grandTotalLabel: "Total Payment",
|
|
16859
17183
|
currencyPrefix: "Rp.",
|
|
@@ -16874,24 +17198,26 @@ var useStyles42 = makeStyles({
|
|
|
16874
17198
|
fontWeight: tokens.fontWeightSemibold
|
|
16875
17199
|
}
|
|
16876
17200
|
},
|
|
17201
|
+
cardScrollWrapper: {
|
|
17202
|
+
height: "500px",
|
|
17203
|
+
overflowY: "auto"
|
|
17204
|
+
},
|
|
16877
17205
|
card: {
|
|
16878
17206
|
backgroundColor: tokens.colorNeutralBackground1,
|
|
16879
|
-
...shorthands.border("1px", "solid", tokens.
|
|
16880
|
-
|
|
16881
|
-
|
|
16882
|
-
|
|
16883
|
-
),
|
|
16884
|
-
boxShadow: "none"
|
|
17207
|
+
...shorthands.border("1px", "solid", tokens.colorNeutralStroke1),
|
|
17208
|
+
padding: tokens.spacingVerticalL,
|
|
17209
|
+
boxShadow: "none",
|
|
17210
|
+
borderRadius: tokens.borderRadiusXLarge
|
|
16885
17211
|
},
|
|
16886
17212
|
content: {
|
|
16887
17213
|
display: "flex",
|
|
16888
17214
|
flexDirection: "column",
|
|
16889
|
-
gap: tokens.
|
|
17215
|
+
gap: tokens.spacingVerticalS
|
|
16890
17216
|
},
|
|
16891
17217
|
section: {
|
|
16892
17218
|
display: "flex",
|
|
16893
17219
|
flexDirection: "column",
|
|
16894
|
-
gap: tokens.
|
|
17220
|
+
gap: tokens.spacingVerticalL
|
|
16895
17221
|
},
|
|
16896
17222
|
row: {
|
|
16897
17223
|
display: "flex",
|
|
@@ -16956,13 +17282,13 @@ var useStyles42 = makeStyles({
|
|
|
16956
17282
|
},
|
|
16957
17283
|
grandTotalLabel: {
|
|
16958
17284
|
color: "#D13438",
|
|
16959
|
-
fontSize: tokens.
|
|
16960
|
-
fontWeight:
|
|
17285
|
+
fontSize: tokens.fontSizeBase300,
|
|
17286
|
+
fontWeight: fontWeight.Medium
|
|
16961
17287
|
},
|
|
16962
17288
|
grandTotalValue: {
|
|
16963
17289
|
color: "#D13438",
|
|
16964
|
-
fontSize: tokens.
|
|
16965
|
-
fontWeight:
|
|
17290
|
+
fontSize: tokens.fontSizeBase500,
|
|
17291
|
+
fontWeight: fontWeight.Medium
|
|
16966
17292
|
},
|
|
16967
17293
|
badge: {
|
|
16968
17294
|
marginLeft: tokens.spacingHorizontalS,
|
|
@@ -16970,10 +17296,27 @@ var useStyles42 = makeStyles({
|
|
|
16970
17296
|
color: "white"
|
|
16971
17297
|
},
|
|
16972
17298
|
divider: {
|
|
16973
|
-
margin: `${tokens.spacingVerticalL} 0
|
|
17299
|
+
// margin: `${tokens.spacingVerticalL} 0`,
|
|
16974
17300
|
},
|
|
16975
17301
|
closeButton: {
|
|
16976
17302
|
color: tokens.colorNeutralForeground1
|
|
17303
|
+
},
|
|
17304
|
+
headerCard: {
|
|
17305
|
+
backgroundColor: lightModeColors.Neutral_Background_1_Hover,
|
|
17306
|
+
borderRadius: tokens.borderRadiusXLarge,
|
|
17307
|
+
gap: tokens.spacingVerticalMNudge,
|
|
17308
|
+
padding: tokens.spacingVerticalMNudge
|
|
17309
|
+
},
|
|
17310
|
+
badgeRoundTripLilac: {
|
|
17311
|
+
borderRadius: tokens.borderRadiusXLarge,
|
|
17312
|
+
border: `0px solid ${sharedColors.Shared_Lilac_Tint_40}`,
|
|
17313
|
+
backgroundColor: sharedColors.Shared_Lilac_Tint_60,
|
|
17314
|
+
color: sharedColors.Shared_Lilac_Primary
|
|
17315
|
+
},
|
|
17316
|
+
badgeRoundTripOrange: {
|
|
17317
|
+
borderRadius: tokens.borderRadiusXLarge,
|
|
17318
|
+
border: `0px solid ${tokens.colorStatusWarningForeground2}`,
|
|
17319
|
+
color: tokens.colorStatusWarningForeground2
|
|
16977
17320
|
}
|
|
16978
17321
|
});
|
|
16979
17322
|
var ModalPriceDetail = ({
|
|
@@ -16981,15 +17324,67 @@ var ModalPriceDetail = ({
|
|
|
16981
17324
|
labels,
|
|
16982
17325
|
isOpen,
|
|
16983
17326
|
onOpenChange,
|
|
17327
|
+
isRoundTrip = false,
|
|
17328
|
+
vesselType,
|
|
17329
|
+
vesselTypeColor,
|
|
16984
17330
|
detailItems,
|
|
17331
|
+
departureItems = [],
|
|
16985
17332
|
addonItems,
|
|
16986
17333
|
subTotal,
|
|
17334
|
+
discountAmount = 0,
|
|
16987
17335
|
taxAmount,
|
|
16988
17336
|
grandTotal,
|
|
17337
|
+
headerInfo,
|
|
17338
|
+
roundTripHeaderInfo,
|
|
17339
|
+
roundTripDetailItems,
|
|
17340
|
+
roundTripDepartureItems,
|
|
17341
|
+
roundTripAddonItems,
|
|
17342
|
+
roundTripSubTotal,
|
|
17343
|
+
roundTripDiscountAmount,
|
|
17344
|
+
roundTripTaxAmount,
|
|
17345
|
+
roundTripGrandTotal,
|
|
16989
17346
|
...props
|
|
16990
17347
|
}) => {
|
|
16991
17348
|
const styles = useStyles42();
|
|
16992
17349
|
const mergedLabels = { ...DEFAULT_LABELS40[language], ...labels };
|
|
17350
|
+
const locale = language === "id" ? "id-ID" : "en-US";
|
|
17351
|
+
const formatCurrency = (value) => `${mergedLabels.currencyCode} ${value.toLocaleString(locale)}`;
|
|
17352
|
+
const passengerItemsFromNested = detailItems.flatMap(
|
|
17353
|
+
(item) => item.list ?? []
|
|
17354
|
+
);
|
|
17355
|
+
const passengerItems = passengerItemsFromNested.length > 0 ? passengerItemsFromNested : detailItems;
|
|
17356
|
+
const finalDepartureItems = departureItems.length > 0 ? departureItems : detailItems;
|
|
17357
|
+
const roundTripDetailSource = roundTripDetailItems ?? detailItems;
|
|
17358
|
+
const roundTripPassengerItemsFromNested = roundTripDetailSource.flatMap(
|
|
17359
|
+
(item) => item.list ?? []
|
|
17360
|
+
);
|
|
17361
|
+
const roundTripPassengerItems = roundTripPassengerItemsFromNested.length > 0 ? roundTripPassengerItemsFromNested : roundTripDetailSource;
|
|
17362
|
+
const roundTripFinalDepartureItems = roundTripDepartureItems?.length ? roundTripDepartureItems : roundTripDetailSource;
|
|
17363
|
+
const roundTripAddonSource = roundTripAddonItems ?? addonItems;
|
|
17364
|
+
const totalTagihan = subTotal - discountAmount;
|
|
17365
|
+
const roundTripTotalTagihan = (roundTripSubTotal ?? subTotal) - (roundTripDiscountAmount ?? discountAmount);
|
|
17366
|
+
const modalHeaderInfo = {
|
|
17367
|
+
logoUrl: headerInfo?.logoUrl ?? "/assets/logo/asdp-default.svg",
|
|
17368
|
+
logoAlt: headerInfo?.logoAlt ?? "asdp",
|
|
17369
|
+
vesselName: headerInfo?.vesselName ?? "KMP PORTLINK",
|
|
17370
|
+
vesselType: vesselType ?? headerInfo?.vesselType ?? "Water Taxi",
|
|
17371
|
+
vesselTypeColor: vesselTypeColor ?? headerInfo?.vesselTypeColor ?? "#107C10",
|
|
17372
|
+
departureHarbor: headerInfo?.departureHarbor ?? "Merak, Banten",
|
|
17373
|
+
arrivalHarbor: headerInfo?.arrivalHarbor ?? "Bakauheni, Lampung",
|
|
17374
|
+
vehicleGroupLabel: headerInfo?.vehicleGroupLabel ?? "Golongan IV \u2022 Mobil Penumpang"
|
|
17375
|
+
};
|
|
17376
|
+
const roundTripModalHeaderInfo = {
|
|
17377
|
+
logoUrl: roundTripHeaderInfo?.logoUrl ?? modalHeaderInfo.logoUrl,
|
|
17378
|
+
logoAlt: roundTripHeaderInfo?.logoAlt ?? modalHeaderInfo.logoAlt,
|
|
17379
|
+
vesselName: roundTripHeaderInfo?.vesselName ?? modalHeaderInfo.vesselName,
|
|
17380
|
+
vesselType: roundTripHeaderInfo?.vesselType ?? modalHeaderInfo.vesselType,
|
|
17381
|
+
vesselTypeColor: roundTripHeaderInfo?.vesselTypeColor ?? modalHeaderInfo.vesselTypeColor,
|
|
17382
|
+
departureHarbor: roundTripHeaderInfo?.departureHarbor ?? modalHeaderInfo.departureHarbor,
|
|
17383
|
+
arrivalHarbor: roundTripHeaderInfo?.arrivalHarbor ?? modalHeaderInfo.arrivalHarbor,
|
|
17384
|
+
vehicleGroupLabel: roundTripHeaderInfo?.vehicleGroupLabel ?? modalHeaderInfo.vehicleGroupLabel
|
|
17385
|
+
};
|
|
17386
|
+
const roundTripTaxValue = roundTripTaxAmount ?? taxAmount;
|
|
17387
|
+
const roundTripGrandTotalValue = roundTripGrandTotal ?? grandTotal;
|
|
16993
17388
|
return /* @__PURE__ */ jsx(
|
|
16994
17389
|
Dialog,
|
|
16995
17390
|
{
|
|
@@ -17018,111 +17413,460 @@ var ModalPriceDetail = ({
|
|
|
17018
17413
|
) })
|
|
17019
17414
|
}
|
|
17020
17415
|
) }),
|
|
17021
|
-
children: mergedLabels.title
|
|
17416
|
+
children: /* @__PURE__ */ jsx(Subtitle1, { style: { fontWeight: fontWeight.Medium }, children: mergedLabels.title })
|
|
17022
17417
|
}
|
|
17023
17418
|
),
|
|
17024
|
-
/* @__PURE__ */
|
|
17025
|
-
|
|
17026
|
-
/* @__PURE__ */ jsxs("div", { className: styles.
|
|
17027
|
-
/* @__PURE__ */ jsxs(
|
|
17028
|
-
/* @__PURE__ */ jsx(
|
|
17029
|
-
|
|
17030
|
-
|
|
17419
|
+
/* @__PURE__ */ jsxs(DialogContent, { className: styles.content, children: [
|
|
17420
|
+
/* @__PURE__ */ jsxs("div", { className: styles.cardScrollWrapper, children: [
|
|
17421
|
+
!isRoundTrip && /* @__PURE__ */ jsx(Card, { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
|
|
17422
|
+
/* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.headerCard, children: [
|
|
17423
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { children: [
|
|
17424
|
+
/* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
|
|
17425
|
+
"img",
|
|
17426
|
+
{
|
|
17427
|
+
src: modalHeaderInfo.logoUrl,
|
|
17428
|
+
width: 35,
|
|
17429
|
+
height: 24,
|
|
17430
|
+
alt: modalHeaderInfo.logoAlt
|
|
17431
|
+
}
|
|
17432
|
+
) }),
|
|
17433
|
+
/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
|
|
17434
|
+
Subtitle2,
|
|
17435
|
+
{
|
|
17436
|
+
style: { fontWeight: fontWeight.Medium },
|
|
17437
|
+
children: modalHeaderInfo.vesselName
|
|
17438
|
+
}
|
|
17439
|
+
) }),
|
|
17440
|
+
/* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
|
|
17441
|
+
Badge,
|
|
17442
|
+
{
|
|
17443
|
+
size: "medium",
|
|
17444
|
+
appearance: "filled",
|
|
17445
|
+
iconPosition: "before",
|
|
17446
|
+
shape: "rounded",
|
|
17447
|
+
style: {
|
|
17448
|
+
backgroundColor: modalHeaderInfo.vesselTypeColor,
|
|
17449
|
+
borderRadius: tokens.borderRadiusXLarge
|
|
17450
|
+
},
|
|
17451
|
+
children: modalHeaderInfo.vesselType
|
|
17452
|
+
}
|
|
17453
|
+
) })
|
|
17454
|
+
] }) }),
|
|
17455
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(
|
|
17456
|
+
Row,
|
|
17031
17457
|
{
|
|
17032
|
-
|
|
17033
|
-
|
|
17034
|
-
|
|
17035
|
-
children:
|
|
17458
|
+
nogutter: true,
|
|
17459
|
+
align: "center",
|
|
17460
|
+
style: { gap: tokens.spacingHorizontalSNudge },
|
|
17461
|
+
children: [
|
|
17462
|
+
/* @__PURE__ */ jsx(
|
|
17463
|
+
Body1Stronger,
|
|
17464
|
+
{
|
|
17465
|
+
style: {
|
|
17466
|
+
color: tokens.colorNeutralStrokeAccessible
|
|
17467
|
+
},
|
|
17468
|
+
children: modalHeaderInfo.departureHarbor
|
|
17469
|
+
}
|
|
17470
|
+
),
|
|
17471
|
+
/* @__PURE__ */ jsx(ArrowRightRegular, {}),
|
|
17472
|
+
/* @__PURE__ */ jsx(
|
|
17473
|
+
Body1Stronger,
|
|
17474
|
+
{
|
|
17475
|
+
style: {
|
|
17476
|
+
color: tokens.colorNeutralStrokeAccessible
|
|
17477
|
+
},
|
|
17478
|
+
children: modalHeaderInfo.arrivalHarbor
|
|
17479
|
+
}
|
|
17480
|
+
)
|
|
17481
|
+
]
|
|
17036
17482
|
}
|
|
17037
|
-
)
|
|
17483
|
+
) }),
|
|
17484
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(
|
|
17485
|
+
Body1,
|
|
17486
|
+
{
|
|
17487
|
+
style: { color: tokens.colorNeutralStrokeAccessible },
|
|
17488
|
+
children: modalHeaderInfo.vehicleGroupLabel
|
|
17489
|
+
}
|
|
17490
|
+
) })
|
|
17038
17491
|
] }),
|
|
17039
|
-
/* @__PURE__ */ jsxs(
|
|
17040
|
-
mergedLabels.
|
|
17041
|
-
|
|
17042
|
-
|
|
17043
|
-
|
|
17044
|
-
)
|
|
17492
|
+
/* @__PURE__ */ jsxs(Row, { nogutter: true, style: { gap: tokens.spacingVerticalMNudge }, children: [
|
|
17493
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.passengerDetailHeader }) }),
|
|
17494
|
+
passengerItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17495
|
+
/* @__PURE__ */ jsx(Body1, { children: item.label }),
|
|
17496
|
+
/* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
|
|
17497
|
+
] }) }, item.key))
|
|
17498
|
+
] }),
|
|
17499
|
+
/* @__PURE__ */ jsx(Divider, {}),
|
|
17500
|
+
addonItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
17501
|
+
/* @__PURE__ */ jsxs(
|
|
17502
|
+
Row,
|
|
17503
|
+
{
|
|
17504
|
+
nogutter: true,
|
|
17505
|
+
style: { gap: tokens.spacingVerticalMNudge },
|
|
17506
|
+
children: [
|
|
17507
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.addonHeader }) }),
|
|
17508
|
+
addonItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17509
|
+
/* @__PURE__ */ jsx(Body1, { children: item.label }),
|
|
17510
|
+
/* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
|
|
17511
|
+
] }) }, item.key))
|
|
17512
|
+
]
|
|
17513
|
+
}
|
|
17514
|
+
),
|
|
17515
|
+
/* @__PURE__ */ jsx(Divider, {})
|
|
17516
|
+
] }),
|
|
17517
|
+
/* @__PURE__ */ jsxs(Row, { nogutter: true, style: { gap: tokens.spacingVerticalMNudge }, children: [
|
|
17518
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.departureFareHeader }) }),
|
|
17519
|
+
finalDepartureItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17520
|
+
/* @__PURE__ */ jsx(Body1, { children: item.label }),
|
|
17521
|
+
/* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
|
|
17522
|
+
] }) }, item.key))
|
|
17523
|
+
] }),
|
|
17524
|
+
/* @__PURE__ */ jsx(Divider, {}),
|
|
17525
|
+
/* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17526
|
+
/* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.subTotalLabel }),
|
|
17527
|
+
/* @__PURE__ */ jsx(Body1Stronger, { children: formatCurrency(subTotal) })
|
|
17528
|
+
] }),
|
|
17529
|
+
/* @__PURE__ */ jsxs(Row, { nogutter: true, style: { gap: tokens.spacingVerticalS }, children: [
|
|
17530
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17531
|
+
/* @__PURE__ */ jsx(Caption1, { children: mergedLabels.discountLabel }),
|
|
17532
|
+
/* @__PURE__ */ jsxs(Body1, { children: [
|
|
17533
|
+
"(-) ",
|
|
17534
|
+
formatCurrency(discountAmount)
|
|
17535
|
+
] })
|
|
17536
|
+
] }) }),
|
|
17537
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17538
|
+
/* @__PURE__ */ jsx(Caption1, { children: mergedLabels.totalTagihanLabel }),
|
|
17539
|
+
/* @__PURE__ */ jsx(Body1, { children: formatCurrency(totalTagihan) })
|
|
17540
|
+
] }) }),
|
|
17541
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17542
|
+
/* @__PURE__ */ jsx(Caption1, { children: mergedLabels.ppnLabel }),
|
|
17543
|
+
/* @__PURE__ */ jsx(Body1, { children: formatCurrency(taxAmount) })
|
|
17544
|
+
] }) })
|
|
17045
17545
|
] })
|
|
17046
|
-
] }),
|
|
17047
|
-
|
|
17048
|
-
"div",
|
|
17049
|
-
|
|
17050
|
-
|
|
17051
|
-
|
|
17052
|
-
|
|
17053
|
-
|
|
17054
|
-
|
|
17055
|
-
|
|
17056
|
-
|
|
17057
|
-
|
|
17546
|
+
] }) }),
|
|
17547
|
+
isRoundTrip && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
17548
|
+
/* @__PURE__ */ jsx(Card, { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
|
|
17549
|
+
/* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.headerCard, children: [
|
|
17550
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { children: [
|
|
17551
|
+
/* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
|
|
17552
|
+
"img",
|
|
17553
|
+
{
|
|
17554
|
+
src: roundTripModalHeaderInfo.logoUrl,
|
|
17555
|
+
width: 35,
|
|
17556
|
+
height: 24,
|
|
17557
|
+
alt: roundTripModalHeaderInfo.logoAlt
|
|
17558
|
+
}
|
|
17559
|
+
) }),
|
|
17560
|
+
/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
|
|
17561
|
+
Subtitle2,
|
|
17562
|
+
{
|
|
17563
|
+
style: { fontWeight: fontWeight.Medium },
|
|
17564
|
+
children: roundTripModalHeaderInfo.vesselName
|
|
17565
|
+
}
|
|
17566
|
+
) }),
|
|
17567
|
+
/* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
|
|
17568
|
+
Badge,
|
|
17569
|
+
{
|
|
17570
|
+
size: "medium",
|
|
17571
|
+
appearance: "filled",
|
|
17572
|
+
iconPosition: "before",
|
|
17573
|
+
shape: "rounded",
|
|
17574
|
+
style: {
|
|
17575
|
+
backgroundColor: roundTripModalHeaderInfo.vesselTypeColor,
|
|
17576
|
+
borderRadius: tokens.borderRadiusXLarge
|
|
17577
|
+
},
|
|
17578
|
+
children: roundTripModalHeaderInfo.vesselType
|
|
17579
|
+
}
|
|
17580
|
+
) })
|
|
17581
|
+
] }) }),
|
|
17582
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(
|
|
17583
|
+
Row,
|
|
17584
|
+
{
|
|
17585
|
+
nogutter: true,
|
|
17586
|
+
align: "center",
|
|
17587
|
+
style: { gap: tokens.spacingHorizontalSNudge },
|
|
17588
|
+
children: [
|
|
17589
|
+
/* @__PURE__ */ jsx(
|
|
17590
|
+
Body1Stronger,
|
|
17591
|
+
{
|
|
17592
|
+
style: {
|
|
17593
|
+
color: tokens.colorNeutralStrokeAccessible
|
|
17594
|
+
},
|
|
17595
|
+
children: roundTripModalHeaderInfo.departureHarbor
|
|
17596
|
+
}
|
|
17597
|
+
),
|
|
17598
|
+
/* @__PURE__ */ jsx(ArrowRightRegular, {}),
|
|
17599
|
+
/* @__PURE__ */ jsx(
|
|
17600
|
+
Body1Stronger,
|
|
17601
|
+
{
|
|
17602
|
+
style: {
|
|
17603
|
+
color: tokens.colorNeutralStrokeAccessible
|
|
17604
|
+
},
|
|
17605
|
+
children: roundTripModalHeaderInfo.arrivalHarbor
|
|
17606
|
+
}
|
|
17607
|
+
)
|
|
17608
|
+
]
|
|
17609
|
+
}
|
|
17610
|
+
) }),
|
|
17611
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(
|
|
17612
|
+
Body1,
|
|
17613
|
+
{
|
|
17614
|
+
style: {
|
|
17615
|
+
color: tokens.colorNeutralStrokeAccessible
|
|
17616
|
+
},
|
|
17617
|
+
children: roundTripModalHeaderInfo.vehicleGroupLabel
|
|
17618
|
+
}
|
|
17619
|
+
) })
|
|
17620
|
+
] }),
|
|
17621
|
+
/* @__PURE__ */ jsx(Row, { nogutter: true, children: /* @__PURE__ */ jsx(
|
|
17622
|
+
Badge,
|
|
17623
|
+
{
|
|
17624
|
+
size: "extra-large",
|
|
17625
|
+
appearance: "tint",
|
|
17626
|
+
shape: "circular",
|
|
17627
|
+
className: styles.badgeRoundTripLilac,
|
|
17628
|
+
children: "Pulang Pergi (Keberangkatan)"
|
|
17629
|
+
}
|
|
17630
|
+
) }),
|
|
17631
|
+
/* @__PURE__ */ jsxs(
|
|
17632
|
+
Row,
|
|
17633
|
+
{
|
|
17634
|
+
nogutter: true,
|
|
17635
|
+
style: { gap: tokens.spacingVerticalMNudge },
|
|
17636
|
+
children: [
|
|
17637
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.passengerDetailHeader }) }),
|
|
17638
|
+
roundTripPassengerItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17639
|
+
/* @__PURE__ */ jsx(Body1, { children: item.label }),
|
|
17640
|
+
/* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
|
|
17641
|
+
] }) }, item.key))
|
|
17642
|
+
]
|
|
17643
|
+
}
|
|
17644
|
+
),
|
|
17645
|
+
/* @__PURE__ */ jsx(Divider, {}),
|
|
17646
|
+
addonItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
17647
|
+
/* @__PURE__ */ jsxs(
|
|
17648
|
+
Row,
|
|
17649
|
+
{
|
|
17650
|
+
nogutter: true,
|
|
17651
|
+
style: { gap: tokens.spacingVerticalMNudge },
|
|
17652
|
+
children: [
|
|
17653
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.addonHeader }) }),
|
|
17654
|
+
addonItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17655
|
+
/* @__PURE__ */ jsx(Body1, { children: item.label }),
|
|
17656
|
+
/* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
|
|
17657
|
+
] }) }, item.key))
|
|
17658
|
+
]
|
|
17659
|
+
}
|
|
17660
|
+
),
|
|
17661
|
+
/* @__PURE__ */ jsx(Divider, {})
|
|
17662
|
+
] }),
|
|
17663
|
+
/* @__PURE__ */ jsxs(
|
|
17664
|
+
Row,
|
|
17665
|
+
{
|
|
17666
|
+
nogutter: true,
|
|
17667
|
+
style: { gap: tokens.spacingVerticalMNudge },
|
|
17668
|
+
children: [
|
|
17669
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.departureFareHeader }) }),
|
|
17670
|
+
finalDepartureItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17671
|
+
/* @__PURE__ */ jsx(Body1, { children: item.label }),
|
|
17672
|
+
/* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
|
|
17673
|
+
] }) }, item.key))
|
|
17674
|
+
]
|
|
17675
|
+
}
|
|
17676
|
+
)
|
|
17677
|
+
] }) }),
|
|
17678
|
+
/* @__PURE__ */ jsx(
|
|
17679
|
+
Card,
|
|
17680
|
+
{
|
|
17681
|
+
className: styles.card,
|
|
17682
|
+
style: { marginTop: tokens.spacingVerticalL },
|
|
17683
|
+
children: /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
|
|
17684
|
+
/* @__PURE__ */ jsxs(Row, { nogutter: true, className: styles.headerCard, children: [
|
|
17685
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { children: [
|
|
17686
|
+
/* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
|
|
17687
|
+
"img",
|
|
17688
|
+
{
|
|
17689
|
+
src: roundTripModalHeaderInfo.logoUrl,
|
|
17690
|
+
width: 35,
|
|
17691
|
+
height: 24,
|
|
17692
|
+
alt: roundTripModalHeaderInfo.logoAlt
|
|
17693
|
+
}
|
|
17694
|
+
) }),
|
|
17695
|
+
/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
|
|
17696
|
+
Subtitle2,
|
|
17697
|
+
{
|
|
17698
|
+
style: { fontWeight: fontWeight.Medium },
|
|
17699
|
+
children: roundTripModalHeaderInfo.vesselName
|
|
17700
|
+
}
|
|
17701
|
+
) }),
|
|
17702
|
+
/* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
|
|
17703
|
+
Badge,
|
|
17704
|
+
{
|
|
17705
|
+
size: "medium",
|
|
17706
|
+
appearance: "filled",
|
|
17707
|
+
iconPosition: "before",
|
|
17708
|
+
shape: "rounded",
|
|
17709
|
+
style: {
|
|
17710
|
+
borderRadius: tokens.borderRadiusXLarge,
|
|
17711
|
+
backgroundColor: roundTripModalHeaderInfo.vesselTypeColor
|
|
17712
|
+
},
|
|
17713
|
+
children: roundTripModalHeaderInfo.vesselType
|
|
17714
|
+
}
|
|
17715
|
+
) })
|
|
17716
|
+
] }) }),
|
|
17717
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(
|
|
17718
|
+
Row,
|
|
17719
|
+
{
|
|
17720
|
+
nogutter: true,
|
|
17721
|
+
align: "center",
|
|
17722
|
+
style: { gap: tokens.spacingHorizontalSNudge },
|
|
17723
|
+
children: [
|
|
17724
|
+
/* @__PURE__ */ jsx(
|
|
17725
|
+
Body1Stronger,
|
|
17726
|
+
{
|
|
17727
|
+
style: {
|
|
17728
|
+
color: tokens.colorNeutralStrokeAccessible
|
|
17729
|
+
},
|
|
17730
|
+
children: roundTripModalHeaderInfo.departureHarbor
|
|
17731
|
+
}
|
|
17732
|
+
),
|
|
17733
|
+
/* @__PURE__ */ jsx(ArrowRightRegular, {}),
|
|
17734
|
+
/* @__PURE__ */ jsx(
|
|
17735
|
+
Body1Stronger,
|
|
17736
|
+
{
|
|
17737
|
+
style: {
|
|
17738
|
+
color: tokens.colorNeutralStrokeAccessible
|
|
17739
|
+
},
|
|
17740
|
+
children: roundTripModalHeaderInfo.arrivalHarbor
|
|
17741
|
+
}
|
|
17742
|
+
)
|
|
17743
|
+
]
|
|
17744
|
+
}
|
|
17745
|
+
) }),
|
|
17746
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(
|
|
17747
|
+
Body1,
|
|
17748
|
+
{
|
|
17749
|
+
style: {
|
|
17750
|
+
color: tokens.colorNeutralStrokeAccessible
|
|
17751
|
+
},
|
|
17752
|
+
children: roundTripModalHeaderInfo.vehicleGroupLabel
|
|
17753
|
+
}
|
|
17754
|
+
) })
|
|
17755
|
+
] }),
|
|
17756
|
+
/* @__PURE__ */ jsx(Row, { nogutter: true, children: /* @__PURE__ */ jsx(
|
|
17757
|
+
Badge,
|
|
17758
|
+
{
|
|
17759
|
+
size: "extra-large",
|
|
17760
|
+
appearance: "outline",
|
|
17761
|
+
shape: "circular",
|
|
17762
|
+
color: "warning",
|
|
17763
|
+
className: styles.badgeRoundTripOrange,
|
|
17764
|
+
children: "Pulang Pergi (Kepulangan)"
|
|
17765
|
+
}
|
|
17766
|
+
) }),
|
|
17767
|
+
/* @__PURE__ */ jsxs(
|
|
17768
|
+
Row,
|
|
17769
|
+
{
|
|
17770
|
+
nogutter: true,
|
|
17771
|
+
style: { gap: tokens.spacingVerticalMNudge },
|
|
17772
|
+
children: [
|
|
17773
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.passengerDetailHeader }) }),
|
|
17774
|
+
roundTripPassengerItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17775
|
+
/* @__PURE__ */ jsx(Body1, { children: item.label }),
|
|
17776
|
+
/* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
|
|
17777
|
+
] }) }, item.key))
|
|
17778
|
+
]
|
|
17779
|
+
}
|
|
17780
|
+
),
|
|
17781
|
+
/* @__PURE__ */ jsx(Divider, {}),
|
|
17782
|
+
roundTripAddonSource.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
17783
|
+
/* @__PURE__ */ jsxs(
|
|
17784
|
+
Row,
|
|
17785
|
+
{
|
|
17786
|
+
nogutter: true,
|
|
17787
|
+
style: { gap: tokens.spacingVerticalMNudge },
|
|
17788
|
+
children: [
|
|
17789
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.addonHeader }) }),
|
|
17790
|
+
roundTripAddonSource.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17791
|
+
/* @__PURE__ */ jsx(Body1, { children: item.label }),
|
|
17792
|
+
/* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
|
|
17793
|
+
] }) }, item.key))
|
|
17794
|
+
]
|
|
17795
|
+
}
|
|
17796
|
+
),
|
|
17797
|
+
/* @__PURE__ */ jsx(Divider, {})
|
|
17798
|
+
] }),
|
|
17799
|
+
/* @__PURE__ */ jsxs(
|
|
17800
|
+
Row,
|
|
17801
|
+
{
|
|
17802
|
+
nogutter: true,
|
|
17803
|
+
style: { gap: tokens.spacingVerticalMNudge },
|
|
17804
|
+
children: [
|
|
17805
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1Stronger, { children: mergedLabels.departureFareHeader }) }),
|
|
17806
|
+
roundTripFinalDepartureItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17807
|
+
/* @__PURE__ */ jsx(Body1, { children: item.label }),
|
|
17808
|
+
/* @__PURE__ */ jsx(Body1, { children: formatCurrency(item.price) })
|
|
17809
|
+
] }) }, item.key))
|
|
17810
|
+
]
|
|
17811
|
+
}
|
|
17058
17812
|
)
|
|
17059
17813
|
] })
|
|
17060
|
-
|
|
17061
|
-
|
|
17062
|
-
|
|
17063
|
-
|
|
17064
|
-
|
|
17065
|
-
|
|
17066
|
-
|
|
17067
|
-
|
|
17068
|
-
|
|
17069
|
-
|
|
17070
|
-
|
|
17071
|
-
|
|
17072
|
-
|
|
17073
|
-
|
|
17074
|
-
|
|
17075
|
-
|
|
17076
|
-
|
|
17077
|
-
|
|
17078
|
-
|
|
17079
|
-
|
|
17080
|
-
|
|
17081
|
-
|
|
17082
|
-
|
|
17083
|
-
|
|
17084
|
-
|
|
17085
|
-
|
|
17086
|
-
|
|
17087
|
-
|
|
17088
|
-
|
|
17089
|
-
|
|
17090
|
-
|
|
17091
|
-
|
|
17092
|
-
|
|
17093
|
-
|
|
17814
|
+
}
|
|
17815
|
+
),
|
|
17816
|
+
/* @__PURE__ */ jsxs(
|
|
17817
|
+
Row,
|
|
17818
|
+
{
|
|
17819
|
+
nogutter: true,
|
|
17820
|
+
style: {
|
|
17821
|
+
gap: tokens.spacingVerticalL,
|
|
17822
|
+
marginTop: tokens.spacingVerticalL
|
|
17823
|
+
},
|
|
17824
|
+
children: [
|
|
17825
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17826
|
+
/* @__PURE__ */ jsx(Caption1, { children: mergedLabels.subTotalLabel }),
|
|
17827
|
+
/* @__PURE__ */ jsx(Body1, { children: formatCurrency(roundTripSubTotal ?? subTotal) })
|
|
17828
|
+
] }) }),
|
|
17829
|
+
/* @__PURE__ */ jsx(Divider, {}),
|
|
17830
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, style: { gap: tokens.spacingVerticalS }, children: [
|
|
17831
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17832
|
+
/* @__PURE__ */ jsx(Caption1, { children: mergedLabels.discountLabel }),
|
|
17833
|
+
/* @__PURE__ */ jsxs(Body1, { children: [
|
|
17834
|
+
"(-)",
|
|
17835
|
+
" ",
|
|
17836
|
+
formatCurrency(
|
|
17837
|
+
roundTripDiscountAmount ?? discountAmount
|
|
17838
|
+
)
|
|
17839
|
+
] })
|
|
17840
|
+
] }) }),
|
|
17841
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17842
|
+
/* @__PURE__ */ jsx(Caption1, { children: mergedLabels.totalTagihanLabel }),
|
|
17843
|
+
/* @__PURE__ */ jsx(Body1, { children: formatCurrency(roundTripTotalTagihan) })
|
|
17844
|
+
] }) }),
|
|
17845
|
+
/* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, justify: "between", children: [
|
|
17846
|
+
/* @__PURE__ */ jsx(Caption1, { children: mergedLabels.ppnLabel }),
|
|
17847
|
+
/* @__PURE__ */ jsx(Body1, { children: formatCurrency(roundTripTaxValue) })
|
|
17848
|
+
] }) })
|
|
17849
|
+
] }) })
|
|
17850
|
+
]
|
|
17851
|
+
}
|
|
17094
17852
|
)
|
|
17095
17853
|
] })
|
|
17096
17854
|
] }),
|
|
17097
|
-
/* @__PURE__ */ jsxs("div", { style: { marginTop: tokens.spacingVerticalL }, children: [
|
|
17098
|
-
/* @__PURE__ */ jsxs("div", { className: styles.row, children: [
|
|
17099
|
-
/* @__PURE__ */ jsx("span", { className: styles.ppnLabel, children: mergedLabels.ppnLabel }),
|
|
17100
|
-
/* @__PURE__ */ jsxs("span", { className: styles.ppnValue, children: [
|
|
17101
|
-
mergedLabels.currencyCode,
|
|
17102
|
-
taxAmount.toLocaleString(
|
|
17103
|
-
language === "id" ? "id-ID" : "en-US"
|
|
17104
|
-
)
|
|
17105
|
-
] })
|
|
17106
|
-
] }),
|
|
17107
|
-
/* @__PURE__ */ jsx("div", { className: styles.ppnNote, children: mergedLabels.ppnNote })
|
|
17108
|
-
] }),
|
|
17109
17855
|
/* @__PURE__ */ jsxs(
|
|
17110
17856
|
"div",
|
|
17111
17857
|
{
|
|
17112
17858
|
className: styles.row,
|
|
17113
17859
|
style: { marginTop: tokens.spacingVerticalXXL },
|
|
17114
17860
|
children: [
|
|
17115
|
-
/* @__PURE__ */ jsx(
|
|
17116
|
-
/* @__PURE__ */ jsxs(
|
|
17861
|
+
/* @__PURE__ */ jsx(Body1Strong, { className: styles.grandTotalLabel, children: mergedLabels.grandTotalLabel }),
|
|
17862
|
+
/* @__PURE__ */ jsxs(Subtitle1, { className: styles.grandTotalValue, children: [
|
|
17117
17863
|
mergedLabels.currencyPrefix,
|
|
17118
|
-
grandTotal.toLocaleString(
|
|
17119
|
-
language === "id" ? "id-ID" : "en-US"
|
|
17120
|
-
)
|
|
17864
|
+
(isRoundTrip ? roundTripGrandTotalValue : grandTotal).toLocaleString(locale)
|
|
17121
17865
|
] })
|
|
17122
17866
|
]
|
|
17123
17867
|
}
|
|
17124
17868
|
)
|
|
17125
|
-
] })
|
|
17869
|
+
] })
|
|
17126
17870
|
] }) })
|
|
17127
17871
|
}
|
|
17128
17872
|
);
|