@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.js
CHANGED
|
@@ -287,11 +287,13 @@ var sharedColors = {
|
|
|
287
287
|
"Shared_Green_Primary": "#107c10",
|
|
288
288
|
"Shared_Lilac_Primary": "#b146c2",
|
|
289
289
|
"Shared_Lilac_Tint_40": "#e6bfed",
|
|
290
|
-
"Shared_Lilac_Tint_60": "#fcf6fd"
|
|
290
|
+
"Shared_Lilac_Tint_60": "#fcf6fd",
|
|
291
|
+
"Shared_Secondary_Primary": "#5C9F38"};
|
|
291
292
|
var foundationColors = {
|
|
292
293
|
"Foundation_Danger_error": "#FD3A3A"
|
|
293
294
|
};
|
|
294
295
|
var lightModeColors = {
|
|
296
|
+
"Neutral_Background_1_Hover": "#f5f5f5",
|
|
295
297
|
"Neutral_Background_2_Hover": "#f0f0f0",
|
|
296
298
|
"Neutral_Background_3_Pressed": "#d6d6d6",
|
|
297
299
|
"Neutral_Foreground_Disabled_Rest": "#bdbdbd",
|
|
@@ -12796,6 +12798,10 @@ var DEFAULT_LABELS26 = {
|
|
|
12796
12798
|
industryTypeOthersLabel: "Jenis Industri Lainnya",
|
|
12797
12799
|
industryTypeOthersPlaceholder: "Masukkan Jenis Industri",
|
|
12798
12800
|
cargoCategoryLabel: "Kategori Muatan",
|
|
12801
|
+
estimatedLooseCargoLabel: "Estimasi Berat Barang Lepas",
|
|
12802
|
+
estimatedLooseCargoWeightPlaceholder: "Masukkan Berat (Ton)",
|
|
12803
|
+
estimatedLooseCargoQuantityLabel: "Jumlah Karung",
|
|
12804
|
+
estimatedLooseCargoUnitLabel: "Karung",
|
|
12799
12805
|
deleteCargoButton: "Hapus Muatan",
|
|
12800
12806
|
addCargoButton: "Tambah Muatan",
|
|
12801
12807
|
loadTypeOptions: {
|
|
@@ -12852,6 +12858,10 @@ var DEFAULT_LABELS26 = {
|
|
|
12852
12858
|
industryTypeOthersLabel: "Other Industry Type",
|
|
12853
12859
|
industryTypeOthersPlaceholder: "Enter Industry Type",
|
|
12854
12860
|
cargoCategoryLabel: "Cargo Category",
|
|
12861
|
+
estimatedLooseCargoLabel: "Estimated Loose Cargo Weight",
|
|
12862
|
+
estimatedLooseCargoWeightPlaceholder: "Enter Weight (Ton)",
|
|
12863
|
+
estimatedLooseCargoQuantityLabel: "Number of Bags",
|
|
12864
|
+
estimatedLooseCargoUnitLabel: "Bags",
|
|
12855
12865
|
deleteCargoButton: "Delete Cargo",
|
|
12856
12866
|
addCargoButton: "Add Cargo",
|
|
12857
12867
|
loadTypeOptions: {
|
|
@@ -13450,6 +13460,9 @@ var CardVehicleOwnerForm = ({
|
|
|
13450
13460
|
const watchIndustryType = watch(
|
|
13451
13461
|
`owners.${index}.cargo.${cargoIndex}.industryType`
|
|
13452
13462
|
);
|
|
13463
|
+
const watchQuantity = watch(
|
|
13464
|
+
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
13465
|
+
);
|
|
13453
13466
|
let _loadTypeOptions = [];
|
|
13454
13467
|
if (watchCommodity && loadTypeOptionsByCommodityId[watchCommodity]) {
|
|
13455
13468
|
_loadTypeOptions = loadTypeOptionsByCommodityId[watchCommodity];
|
|
@@ -13459,6 +13472,9 @@ var CardVehicleOwnerForm = ({
|
|
|
13459
13472
|
label: `${lt.name}${lt.unit?.name ? ` (${lt.unit.name})` : ""}`
|
|
13460
13473
|
}));
|
|
13461
13474
|
}
|
|
13475
|
+
const _selectedLoadType = loadTypes.find(
|
|
13476
|
+
(loadType) => loadType.id.toString() === watchLoadType
|
|
13477
|
+
);
|
|
13462
13478
|
const isLoadTypeOther = _loadTypeOptions.find(
|
|
13463
13479
|
(lt) => lt.value.toString() === String(watchLoadType)
|
|
13464
13480
|
)?.label.startsWith(
|
|
@@ -13726,13 +13742,295 @@ var CardVehicleOwnerForm = ({
|
|
|
13726
13742
|
)
|
|
13727
13743
|
] })
|
|
13728
13744
|
] }),
|
|
13745
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
|
|
13746
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.estimatedLooseCargoLabel }) }),
|
|
13747
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { md: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13748
|
+
InputDynamic_default,
|
|
13749
|
+
{
|
|
13750
|
+
control,
|
|
13751
|
+
disabled,
|
|
13752
|
+
name: `owners.${index}.cargo.${cargoIndex}.cargoWeight`,
|
|
13753
|
+
placeholder: mergedLabels.estimatedLooseCargoWeightPlaceholder,
|
|
13754
|
+
size: "large",
|
|
13755
|
+
type: "number",
|
|
13756
|
+
step: "1",
|
|
13757
|
+
onChange: (val) => {
|
|
13758
|
+
setValue(
|
|
13759
|
+
`owners.${index}.cargo.${cargoIndex}.cargoWeight`,
|
|
13760
|
+
val ? Number(val) : 0
|
|
13761
|
+
);
|
|
13762
|
+
const updatedCargoItems = owner.cargoItems?.map(
|
|
13763
|
+
(c, cIdx) => cIdx === cargoIndex ? {
|
|
13764
|
+
...c,
|
|
13765
|
+
estimatedLooseCargoWeight: val ? Number(val) : 0
|
|
13766
|
+
} : c
|
|
13767
|
+
);
|
|
13768
|
+
onUpdateOwner(owner.id, {
|
|
13769
|
+
cargoItems: updatedCargoItems
|
|
13770
|
+
});
|
|
13771
|
+
},
|
|
13772
|
+
contentAfter: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13773
|
+
"div",
|
|
13774
|
+
{
|
|
13775
|
+
style: {
|
|
13776
|
+
paddingRight: "12px",
|
|
13777
|
+
color: reactComponents.tokens.colorNeutralForeground1,
|
|
13778
|
+
fontSize: reactComponents.tokens.fontSizeBase300
|
|
13779
|
+
},
|
|
13780
|
+
children: "Ton"
|
|
13781
|
+
}
|
|
13782
|
+
)
|
|
13783
|
+
}
|
|
13784
|
+
) })
|
|
13785
|
+
] }),
|
|
13786
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
|
|
13787
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.estimatedLooseCargoQuantityLabel }) }),
|
|
13788
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { lg: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
13789
|
+
"div",
|
|
13790
|
+
{
|
|
13791
|
+
style: {
|
|
13792
|
+
display: "flex",
|
|
13793
|
+
alignItems: "center",
|
|
13794
|
+
border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
|
|
13795
|
+
borderRadius: reactComponents.tokens.borderRadiusMedium,
|
|
13796
|
+
height: "40px",
|
|
13797
|
+
padding: "0 12px",
|
|
13798
|
+
backgroundColor: reactComponents.tokens.colorNeutralBackground1
|
|
13799
|
+
},
|
|
13800
|
+
children: [
|
|
13801
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 0.5 } }),
|
|
13802
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
13803
|
+
"div",
|
|
13804
|
+
{
|
|
13805
|
+
style: {
|
|
13806
|
+
display: "flex",
|
|
13807
|
+
alignItems: "center",
|
|
13808
|
+
gap: "12px"
|
|
13809
|
+
},
|
|
13810
|
+
children: [
|
|
13811
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13812
|
+
reactComponents.Button,
|
|
13813
|
+
{
|
|
13814
|
+
appearance: "transparent",
|
|
13815
|
+
disabled,
|
|
13816
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13817
|
+
react.Icon,
|
|
13818
|
+
{
|
|
13819
|
+
icon: "fluent:subtract-circle-24-regular",
|
|
13820
|
+
style: {
|
|
13821
|
+
fontSize: "24px",
|
|
13822
|
+
color: reactComponents.tokens.colorNeutralForeground4
|
|
13823
|
+
}
|
|
13824
|
+
}
|
|
13825
|
+
),
|
|
13826
|
+
"aria-label": mergedLabels.decrementQuantityAriaLabel,
|
|
13827
|
+
size: "small",
|
|
13828
|
+
onClick: () => {
|
|
13829
|
+
const currentVal = getValues(
|
|
13830
|
+
`owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`
|
|
13831
|
+
) || 0;
|
|
13832
|
+
const currentQty = Number(currentVal);
|
|
13833
|
+
if (currentQty > 0) {
|
|
13834
|
+
const newVal = currentQty - 1;
|
|
13835
|
+
setValue(
|
|
13836
|
+
`owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`,
|
|
13837
|
+
newVal
|
|
13838
|
+
);
|
|
13839
|
+
const updatedCargoItems = owner.cargoItems?.map(
|
|
13840
|
+
(c, cIdx) => cIdx === cargoIndex ? {
|
|
13841
|
+
...c,
|
|
13842
|
+
estimatedLooseCargoQuantity: newVal
|
|
13843
|
+
} : c
|
|
13844
|
+
);
|
|
13845
|
+
onUpdateOwner(owner.id, {
|
|
13846
|
+
cargoItems: updatedCargoItems
|
|
13847
|
+
});
|
|
13848
|
+
}
|
|
13849
|
+
},
|
|
13850
|
+
style: {
|
|
13851
|
+
minWidth: "32px",
|
|
13852
|
+
padding: "0"
|
|
13853
|
+
}
|
|
13854
|
+
}
|
|
13855
|
+
),
|
|
13856
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "40px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13857
|
+
reactHookForm.Controller,
|
|
13858
|
+
{
|
|
13859
|
+
name: `owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`,
|
|
13860
|
+
control,
|
|
13861
|
+
disabled,
|
|
13862
|
+
render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
13863
|
+
"input",
|
|
13864
|
+
{
|
|
13865
|
+
...field,
|
|
13866
|
+
min: 0,
|
|
13867
|
+
step: "1",
|
|
13868
|
+
type: "number",
|
|
13869
|
+
style: {
|
|
13870
|
+
border: "none",
|
|
13871
|
+
width: "100%",
|
|
13872
|
+
textAlign: "center",
|
|
13873
|
+
outline: "none",
|
|
13874
|
+
backgroundColor: "transparent",
|
|
13875
|
+
color: reactComponents.tokens.colorNeutralForeground1,
|
|
13876
|
+
fontSize: reactComponents.tokens.fontSizeBase400,
|
|
13877
|
+
fontFamily: reactComponents.tokens.fontFamilyBase
|
|
13878
|
+
},
|
|
13879
|
+
onKeyDown: (e) => {
|
|
13880
|
+
if ([
|
|
13881
|
+
"e",
|
|
13882
|
+
"E",
|
|
13883
|
+
"+",
|
|
13884
|
+
"-",
|
|
13885
|
+
".",
|
|
13886
|
+
","
|
|
13887
|
+
].includes(e.key)) {
|
|
13888
|
+
e.preventDefault();
|
|
13889
|
+
}
|
|
13890
|
+
},
|
|
13891
|
+
onPaste: (e) => {
|
|
13892
|
+
const paste = e.clipboardData.getData(
|
|
13893
|
+
"text"
|
|
13894
|
+
);
|
|
13895
|
+
if (!/^\d+$/.test(paste)) {
|
|
13896
|
+
e.preventDefault();
|
|
13897
|
+
}
|
|
13898
|
+
},
|
|
13899
|
+
onWheel: (e) => e.target.blur(),
|
|
13900
|
+
onChange: (e) => {
|
|
13901
|
+
const newVal = Number(
|
|
13902
|
+
e.target.value
|
|
13903
|
+
);
|
|
13904
|
+
field.onChange(e);
|
|
13905
|
+
const updatedCargoItems = owner.cargoItems?.map(
|
|
13906
|
+
(c, cIdx) => cIdx === cargoIndex ? {
|
|
13907
|
+
...c,
|
|
13908
|
+
estimatedLooseCargoQuantity: newVal
|
|
13909
|
+
} : c
|
|
13910
|
+
);
|
|
13911
|
+
onUpdateOwner(owner.id, {
|
|
13912
|
+
cargoItems: updatedCargoItems
|
|
13913
|
+
});
|
|
13914
|
+
}
|
|
13915
|
+
}
|
|
13916
|
+
),
|
|
13917
|
+
rules: {
|
|
13918
|
+
validate: (val) => Number(val) >= 0
|
|
13919
|
+
}
|
|
13920
|
+
}
|
|
13921
|
+
) }),
|
|
13922
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13923
|
+
reactComponents.Button,
|
|
13924
|
+
{
|
|
13925
|
+
appearance: "transparent",
|
|
13926
|
+
disabled,
|
|
13927
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13928
|
+
react.Icon,
|
|
13929
|
+
{
|
|
13930
|
+
icon: "fluent:add-circle-24-regular",
|
|
13931
|
+
style: {
|
|
13932
|
+
fontSize: "24px",
|
|
13933
|
+
color: reactComponents.tokens.colorBrandStroke1
|
|
13934
|
+
}
|
|
13935
|
+
}
|
|
13936
|
+
),
|
|
13937
|
+
"aria-label": mergedLabels.incrementQuantityAriaLabel,
|
|
13938
|
+
size: "small",
|
|
13939
|
+
onClick: () => {
|
|
13940
|
+
const currentVal = getValues(
|
|
13941
|
+
`owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`
|
|
13942
|
+
) || 0;
|
|
13943
|
+
const currentQty = Number(currentVal);
|
|
13944
|
+
const newVal = currentQty + 1;
|
|
13945
|
+
setValue(
|
|
13946
|
+
`owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`,
|
|
13947
|
+
newVal
|
|
13948
|
+
);
|
|
13949
|
+
const updatedCargoItems = owner.cargoItems?.map(
|
|
13950
|
+
(c, cIdx) => cIdx === cargoIndex ? {
|
|
13951
|
+
...c,
|
|
13952
|
+
estimatedLooseCargoQuantity: newVal
|
|
13953
|
+
} : c
|
|
13954
|
+
);
|
|
13955
|
+
onUpdateOwner(owner.id, {
|
|
13956
|
+
cargoItems: updatedCargoItems
|
|
13957
|
+
});
|
|
13958
|
+
},
|
|
13959
|
+
style: {
|
|
13960
|
+
minWidth: "32px",
|
|
13961
|
+
padding: "0"
|
|
13962
|
+
}
|
|
13963
|
+
}
|
|
13964
|
+
)
|
|
13965
|
+
]
|
|
13966
|
+
}
|
|
13967
|
+
),
|
|
13968
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13969
|
+
"div",
|
|
13970
|
+
{
|
|
13971
|
+
style: {
|
|
13972
|
+
flex: 1,
|
|
13973
|
+
textAlign: "left",
|
|
13974
|
+
color: reactComponents.tokens.colorNeutralForeground1,
|
|
13975
|
+
fontSize: reactComponents.tokens.fontSizeBase300,
|
|
13976
|
+
paddingRight: "8px"
|
|
13977
|
+
},
|
|
13978
|
+
children: mergedLabels.estimatedLooseCargoUnitLabel
|
|
13979
|
+
}
|
|
13980
|
+
)
|
|
13981
|
+
]
|
|
13982
|
+
}
|
|
13983
|
+
) })
|
|
13984
|
+
] }),
|
|
13985
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { lg: 12, children: [
|
|
13986
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.priceLabel }),
|
|
13987
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13988
|
+
reactComponents.Body2,
|
|
13989
|
+
{
|
|
13990
|
+
style: { marginTop: "0.5rem" },
|
|
13991
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
|
|
13992
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xl: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Strong, { children: [
|
|
13993
|
+
watch(
|
|
13994
|
+
`owners.${index}.cargo.${cargoIndex}.commodity`
|
|
13995
|
+
) || "Komoditas",
|
|
13996
|
+
" ",
|
|
13997
|
+
"\u2022 ",
|
|
13998
|
+
watch(
|
|
13999
|
+
`owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`
|
|
14000
|
+
) || 0,
|
|
14001
|
+
"x",
|
|
14002
|
+
" ",
|
|
14003
|
+
mergedLabels.estimatedLooseCargoUnitLabel,
|
|
14004
|
+
" ",
|
|
14005
|
+
"\u2022 IDR. 15,000"
|
|
14006
|
+
] }) }),
|
|
14007
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
14008
|
+
reactGridSystem.Col,
|
|
14009
|
+
{
|
|
14010
|
+
xl: 6,
|
|
14011
|
+
style: {
|
|
14012
|
+
color: sharedColors["Shared_Secondary_Primary"],
|
|
14013
|
+
textAlign: "right"
|
|
14014
|
+
},
|
|
14015
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Stronger, { children: new Intl.NumberFormat(
|
|
14016
|
+
"id-ID",
|
|
14017
|
+
{
|
|
14018
|
+
style: "currency",
|
|
14019
|
+
currency: "IDR",
|
|
14020
|
+
minimumFractionDigits: 0
|
|
14021
|
+
}
|
|
14022
|
+
).format(
|
|
14023
|
+
(watch(
|
|
14024
|
+
`owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`
|
|
14025
|
+
) || 0) * 15e3
|
|
14026
|
+
) })
|
|
14027
|
+
}
|
|
14028
|
+
)
|
|
14029
|
+
] })
|
|
14030
|
+
}
|
|
14031
|
+
)
|
|
14032
|
+
] }) }),
|
|
13729
14033
|
(() => {
|
|
13730
|
-
const type = watch(
|
|
13731
|
-
`owners.${index}.cargo.${cargoIndex}.loadType`
|
|
13732
|
-
);
|
|
13733
|
-
const _selectedLoadType = loadTypes.find(
|
|
13734
|
-
(loadType) => loadType.id.toString() === type
|
|
13735
|
-
);
|
|
13736
14034
|
if (!_selectedLoadType) return null;
|
|
13737
14035
|
return /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
|
|
13738
14036
|
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 12, children: [
|
|
@@ -13917,11 +14215,11 @@ var CardVehicleOwnerForm = ({
|
|
|
13917
14215
|
paddingRight: "8px"
|
|
13918
14216
|
},
|
|
13919
14217
|
children: (() => {
|
|
13920
|
-
const
|
|
14218
|
+
const type = watch(
|
|
13921
14219
|
`owners.${index}.cargo.${cargoIndex}.loadType`
|
|
13922
14220
|
);
|
|
13923
14221
|
const selectedLoadType2 = loadTypes.find(
|
|
13924
|
-
(loadType) => loadType.id.toString() ===
|
|
14222
|
+
(loadType) => loadType.id.toString() === type
|
|
13925
14223
|
);
|
|
13926
14224
|
return selectedLoadType2?.unit?.name;
|
|
13927
14225
|
})()
|
|
@@ -13938,22 +14236,42 @@ var CardVehicleOwnerForm = ({
|
|
|
13938
14236
|
reactComponents.Body2,
|
|
13939
14237
|
{
|
|
13940
14238
|
style: { marginTop: "0.5rem" },
|
|
13941
|
-
children: (
|
|
13942
|
-
|
|
13943
|
-
|
|
14239
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
|
|
14240
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xl: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Strong, { children: [
|
|
14241
|
+
_selectedLoadType.name,
|
|
14242
|
+
" \u2022",
|
|
14243
|
+
" ",
|
|
14244
|
+
watchQuantity,
|
|
14245
|
+
"x",
|
|
14246
|
+
" ",
|
|
14247
|
+
_selectedLoadType.unit?.name,
|
|
14248
|
+
" ",
|
|
14249
|
+
"\u2022",
|
|
14250
|
+
" ",
|
|
14251
|
+
_selectedLoadType.formattedPrice
|
|
14252
|
+
] }) }),
|
|
14253
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
14254
|
+
reactGridSystem.Col,
|
|
13944
14255
|
{
|
|
13945
|
-
|
|
13946
|
-
|
|
13947
|
-
|
|
14256
|
+
xl: 6,
|
|
14257
|
+
style: { color: sharedColors["Shared_Secondary_Primary"], textAlign: "right" },
|
|
14258
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Stronger, { children: new Intl.NumberFormat(
|
|
14259
|
+
"id-ID",
|
|
14260
|
+
{
|
|
14261
|
+
style: "currency",
|
|
14262
|
+
currency: "IDR",
|
|
14263
|
+
minimumFractionDigits: 0
|
|
14264
|
+
}
|
|
14265
|
+
).format(
|
|
14266
|
+
Number(
|
|
14267
|
+
getValues(
|
|
14268
|
+
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
14269
|
+
) || 0
|
|
14270
|
+
) * (_selectedLoadType.price || 0)
|
|
14271
|
+
) })
|
|
13948
14272
|
}
|
|
13949
|
-
)
|
|
13950
|
-
|
|
13951
|
-
getValues(
|
|
13952
|
-
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
13953
|
-
) || 0
|
|
13954
|
-
) * (_selectedLoadType?.price || 0)
|
|
13955
|
-
);
|
|
13956
|
-
})()
|
|
14273
|
+
)
|
|
14274
|
+
] })
|
|
13957
14275
|
}
|
|
13958
14276
|
)
|
|
13959
14277
|
] })
|
|
@@ -16847,10 +17165,13 @@ var CardStatusOrder = ({
|
|
|
16847
17165
|
var DEFAULT_LABELS40 = {
|
|
16848
17166
|
id: {
|
|
16849
17167
|
title: "Rincian Harga",
|
|
17168
|
+
passengerDetailHeader: "Detail Penumpang",
|
|
16850
17169
|
addonHeader: "Add On",
|
|
17170
|
+
departureFareHeader: "Tarif Keberangkatan",
|
|
16851
17171
|
subTotalLabel: "Sub Tagihan",
|
|
16852
|
-
|
|
16853
|
-
|
|
17172
|
+
discountLabel: "Discount Reduksi",
|
|
17173
|
+
totalTagihanLabel: "Total Tagihan (Subtotal - Reduksi)",
|
|
17174
|
+
ppnLabel: "PPN 11%",
|
|
16854
17175
|
ppnNote: "*PPN 11% dikenakan untuk biaya layanan dan biaya admin",
|
|
16855
17176
|
grandTotalLabel: "Total Pembayaran",
|
|
16856
17177
|
currencyPrefix: "Rp.",
|
|
@@ -16859,10 +17180,13 @@ var DEFAULT_LABELS40 = {
|
|
|
16859
17180
|
},
|
|
16860
17181
|
en: {
|
|
16861
17182
|
title: "Price Details",
|
|
17183
|
+
passengerDetailHeader: "Passenger Details",
|
|
16862
17184
|
addonHeader: "Add On",
|
|
17185
|
+
departureFareHeader: "Departure Fare",
|
|
16863
17186
|
subTotalLabel: "Sub Total",
|
|
16864
|
-
|
|
16865
|
-
|
|
17187
|
+
discountLabel: "Discount Reduction",
|
|
17188
|
+
totalTagihanLabel: "Total Bill (Subtotal - Reduction)",
|
|
17189
|
+
ppnLabel: "VAT 11%",
|
|
16866
17190
|
ppnNote: "*VAT 11% is charged for service fees and admin fees",
|
|
16867
17191
|
grandTotalLabel: "Total Payment",
|
|
16868
17192
|
currencyPrefix: "Rp.",
|
|
@@ -16883,24 +17207,26 @@ var useStyles42 = reactComponents.makeStyles({
|
|
|
16883
17207
|
fontWeight: reactComponents.tokens.fontWeightSemibold
|
|
16884
17208
|
}
|
|
16885
17209
|
},
|
|
17210
|
+
cardScrollWrapper: {
|
|
17211
|
+
height: "500px",
|
|
17212
|
+
overflowY: "auto"
|
|
17213
|
+
},
|
|
16886
17214
|
card: {
|
|
16887
17215
|
backgroundColor: reactComponents.tokens.colorNeutralBackground1,
|
|
16888
|
-
...reactComponents.shorthands.border("1px", "solid", reactComponents.tokens.
|
|
16889
|
-
|
|
16890
|
-
|
|
16891
|
-
|
|
16892
|
-
),
|
|
16893
|
-
boxShadow: "none"
|
|
17216
|
+
...reactComponents.shorthands.border("1px", "solid", reactComponents.tokens.colorNeutralStroke1),
|
|
17217
|
+
padding: reactComponents.tokens.spacingVerticalL,
|
|
17218
|
+
boxShadow: "none",
|
|
17219
|
+
borderRadius: reactComponents.tokens.borderRadiusXLarge
|
|
16894
17220
|
},
|
|
16895
17221
|
content: {
|
|
16896
17222
|
display: "flex",
|
|
16897
17223
|
flexDirection: "column",
|
|
16898
|
-
gap: reactComponents.tokens.
|
|
17224
|
+
gap: reactComponents.tokens.spacingVerticalS
|
|
16899
17225
|
},
|
|
16900
17226
|
section: {
|
|
16901
17227
|
display: "flex",
|
|
16902
17228
|
flexDirection: "column",
|
|
16903
|
-
gap: reactComponents.tokens.
|
|
17229
|
+
gap: reactComponents.tokens.spacingVerticalL
|
|
16904
17230
|
},
|
|
16905
17231
|
row: {
|
|
16906
17232
|
display: "flex",
|
|
@@ -16965,13 +17291,13 @@ var useStyles42 = reactComponents.makeStyles({
|
|
|
16965
17291
|
},
|
|
16966
17292
|
grandTotalLabel: {
|
|
16967
17293
|
color: "#D13438",
|
|
16968
|
-
fontSize: reactComponents.tokens.
|
|
16969
|
-
fontWeight:
|
|
17294
|
+
fontSize: reactComponents.tokens.fontSizeBase300,
|
|
17295
|
+
fontWeight: fontWeight.Medium
|
|
16970
17296
|
},
|
|
16971
17297
|
grandTotalValue: {
|
|
16972
17298
|
color: "#D13438",
|
|
16973
|
-
fontSize: reactComponents.tokens.
|
|
16974
|
-
fontWeight:
|
|
17299
|
+
fontSize: reactComponents.tokens.fontSizeBase500,
|
|
17300
|
+
fontWeight: fontWeight.Medium
|
|
16975
17301
|
},
|
|
16976
17302
|
badge: {
|
|
16977
17303
|
marginLeft: reactComponents.tokens.spacingHorizontalS,
|
|
@@ -16979,10 +17305,27 @@ var useStyles42 = reactComponents.makeStyles({
|
|
|
16979
17305
|
color: "white"
|
|
16980
17306
|
},
|
|
16981
17307
|
divider: {
|
|
16982
|
-
margin: `${
|
|
17308
|
+
// margin: `${tokens.spacingVerticalL} 0`,
|
|
16983
17309
|
},
|
|
16984
17310
|
closeButton: {
|
|
16985
17311
|
color: reactComponents.tokens.colorNeutralForeground1
|
|
17312
|
+
},
|
|
17313
|
+
headerCard: {
|
|
17314
|
+
backgroundColor: lightModeColors.Neutral_Background_1_Hover,
|
|
17315
|
+
borderRadius: reactComponents.tokens.borderRadiusXLarge,
|
|
17316
|
+
gap: reactComponents.tokens.spacingVerticalMNudge,
|
|
17317
|
+
padding: reactComponents.tokens.spacingVerticalMNudge
|
|
17318
|
+
},
|
|
17319
|
+
badgeRoundTripLilac: {
|
|
17320
|
+
borderRadius: reactComponents.tokens.borderRadiusXLarge,
|
|
17321
|
+
border: `0px solid ${sharedColors.Shared_Lilac_Tint_40}`,
|
|
17322
|
+
backgroundColor: sharedColors.Shared_Lilac_Tint_60,
|
|
17323
|
+
color: sharedColors.Shared_Lilac_Primary
|
|
17324
|
+
},
|
|
17325
|
+
badgeRoundTripOrange: {
|
|
17326
|
+
borderRadius: reactComponents.tokens.borderRadiusXLarge,
|
|
17327
|
+
border: `0px solid ${reactComponents.tokens.colorStatusWarningForeground2}`,
|
|
17328
|
+
color: reactComponents.tokens.colorStatusWarningForeground2
|
|
16986
17329
|
}
|
|
16987
17330
|
});
|
|
16988
17331
|
var ModalPriceDetail = ({
|
|
@@ -16990,15 +17333,67 @@ var ModalPriceDetail = ({
|
|
|
16990
17333
|
labels,
|
|
16991
17334
|
isOpen,
|
|
16992
17335
|
onOpenChange,
|
|
17336
|
+
isRoundTrip = false,
|
|
17337
|
+
vesselType,
|
|
17338
|
+
vesselTypeColor,
|
|
16993
17339
|
detailItems,
|
|
17340
|
+
departureItems = [],
|
|
16994
17341
|
addonItems,
|
|
16995
17342
|
subTotal,
|
|
17343
|
+
discountAmount = 0,
|
|
16996
17344
|
taxAmount,
|
|
16997
17345
|
grandTotal,
|
|
17346
|
+
headerInfo,
|
|
17347
|
+
roundTripHeaderInfo,
|
|
17348
|
+
roundTripDetailItems,
|
|
17349
|
+
roundTripDepartureItems,
|
|
17350
|
+
roundTripAddonItems,
|
|
17351
|
+
roundTripSubTotal,
|
|
17352
|
+
roundTripDiscountAmount,
|
|
17353
|
+
roundTripTaxAmount,
|
|
17354
|
+
roundTripGrandTotal,
|
|
16998
17355
|
...props
|
|
16999
17356
|
}) => {
|
|
17000
17357
|
const styles = useStyles42();
|
|
17001
17358
|
const mergedLabels = { ...DEFAULT_LABELS40[language], ...labels };
|
|
17359
|
+
const locale = language === "id" ? "id-ID" : "en-US";
|
|
17360
|
+
const formatCurrency = (value) => `${mergedLabels.currencyCode} ${value.toLocaleString(locale)}`;
|
|
17361
|
+
const passengerItemsFromNested = detailItems.flatMap(
|
|
17362
|
+
(item) => item.list ?? []
|
|
17363
|
+
);
|
|
17364
|
+
const passengerItems = passengerItemsFromNested.length > 0 ? passengerItemsFromNested : detailItems;
|
|
17365
|
+
const finalDepartureItems = departureItems.length > 0 ? departureItems : detailItems;
|
|
17366
|
+
const roundTripDetailSource = roundTripDetailItems ?? detailItems;
|
|
17367
|
+
const roundTripPassengerItemsFromNested = roundTripDetailSource.flatMap(
|
|
17368
|
+
(item) => item.list ?? []
|
|
17369
|
+
);
|
|
17370
|
+
const roundTripPassengerItems = roundTripPassengerItemsFromNested.length > 0 ? roundTripPassengerItemsFromNested : roundTripDetailSource;
|
|
17371
|
+
const roundTripFinalDepartureItems = roundTripDepartureItems?.length ? roundTripDepartureItems : roundTripDetailSource;
|
|
17372
|
+
const roundTripAddonSource = roundTripAddonItems ?? addonItems;
|
|
17373
|
+
const totalTagihan = subTotal - discountAmount;
|
|
17374
|
+
const roundTripTotalTagihan = (roundTripSubTotal ?? subTotal) - (roundTripDiscountAmount ?? discountAmount);
|
|
17375
|
+
const modalHeaderInfo = {
|
|
17376
|
+
logoUrl: headerInfo?.logoUrl ?? "/assets/logo/asdp-default.svg",
|
|
17377
|
+
logoAlt: headerInfo?.logoAlt ?? "asdp",
|
|
17378
|
+
vesselName: headerInfo?.vesselName ?? "KMP PORTLINK",
|
|
17379
|
+
vesselType: vesselType ?? headerInfo?.vesselType ?? "Water Taxi",
|
|
17380
|
+
vesselTypeColor: vesselTypeColor ?? headerInfo?.vesselTypeColor ?? "#107C10",
|
|
17381
|
+
departureHarbor: headerInfo?.departureHarbor ?? "Merak, Banten",
|
|
17382
|
+
arrivalHarbor: headerInfo?.arrivalHarbor ?? "Bakauheni, Lampung",
|
|
17383
|
+
vehicleGroupLabel: headerInfo?.vehicleGroupLabel ?? "Golongan IV \u2022 Mobil Penumpang"
|
|
17384
|
+
};
|
|
17385
|
+
const roundTripModalHeaderInfo = {
|
|
17386
|
+
logoUrl: roundTripHeaderInfo?.logoUrl ?? modalHeaderInfo.logoUrl,
|
|
17387
|
+
logoAlt: roundTripHeaderInfo?.logoAlt ?? modalHeaderInfo.logoAlt,
|
|
17388
|
+
vesselName: roundTripHeaderInfo?.vesselName ?? modalHeaderInfo.vesselName,
|
|
17389
|
+
vesselType: roundTripHeaderInfo?.vesselType ?? modalHeaderInfo.vesselType,
|
|
17390
|
+
vesselTypeColor: roundTripHeaderInfo?.vesselTypeColor ?? modalHeaderInfo.vesselTypeColor,
|
|
17391
|
+
departureHarbor: roundTripHeaderInfo?.departureHarbor ?? modalHeaderInfo.departureHarbor,
|
|
17392
|
+
arrivalHarbor: roundTripHeaderInfo?.arrivalHarbor ?? modalHeaderInfo.arrivalHarbor,
|
|
17393
|
+
vehicleGroupLabel: roundTripHeaderInfo?.vehicleGroupLabel ?? modalHeaderInfo.vehicleGroupLabel
|
|
17394
|
+
};
|
|
17395
|
+
const roundTripTaxValue = roundTripTaxAmount ?? taxAmount;
|
|
17396
|
+
const roundTripGrandTotalValue = roundTripGrandTotal ?? grandTotal;
|
|
17002
17397
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
17003
17398
|
reactComponents.Dialog,
|
|
17004
17399
|
{
|
|
@@ -17027,111 +17422,460 @@ var ModalPriceDetail = ({
|
|
|
17027
17422
|
) })
|
|
17028
17423
|
}
|
|
17029
17424
|
) }),
|
|
17030
|
-
children: mergedLabels.title
|
|
17425
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { style: { fontWeight: fontWeight.Medium }, children: mergedLabels.title })
|
|
17031
17426
|
}
|
|
17032
17427
|
),
|
|
17033
|
-
/* @__PURE__ */ jsxRuntime.
|
|
17034
|
-
|
|
17035
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.
|
|
17036
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
17037
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17038
|
-
|
|
17039
|
-
|
|
17428
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { className: styles.content, children: [
|
|
17429
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.cardScrollWrapper, children: [
|
|
17430
|
+
!isRoundTrip && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
|
|
17431
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.headerCard, children: [
|
|
17432
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
|
|
17433
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17434
|
+
"img",
|
|
17435
|
+
{
|
|
17436
|
+
src: modalHeaderInfo.logoUrl,
|
|
17437
|
+
width: 35,
|
|
17438
|
+
height: 24,
|
|
17439
|
+
alt: modalHeaderInfo.logoAlt
|
|
17440
|
+
}
|
|
17441
|
+
) }),
|
|
17442
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17443
|
+
reactComponents.Subtitle2,
|
|
17444
|
+
{
|
|
17445
|
+
style: { fontWeight: fontWeight.Medium },
|
|
17446
|
+
children: modalHeaderInfo.vesselName
|
|
17447
|
+
}
|
|
17448
|
+
) }),
|
|
17449
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17450
|
+
reactComponents.Badge,
|
|
17451
|
+
{
|
|
17452
|
+
size: "medium",
|
|
17453
|
+
appearance: "filled",
|
|
17454
|
+
iconPosition: "before",
|
|
17455
|
+
shape: "rounded",
|
|
17456
|
+
style: {
|
|
17457
|
+
backgroundColor: modalHeaderInfo.vesselTypeColor,
|
|
17458
|
+
borderRadius: reactComponents.tokens.borderRadiusXLarge
|
|
17459
|
+
},
|
|
17460
|
+
children: modalHeaderInfo.vesselType
|
|
17461
|
+
}
|
|
17462
|
+
) })
|
|
17463
|
+
] }) }),
|
|
17464
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
17465
|
+
reactGridSystem.Row,
|
|
17040
17466
|
{
|
|
17041
|
-
|
|
17042
|
-
|
|
17043
|
-
|
|
17044
|
-
children:
|
|
17467
|
+
nogutter: true,
|
|
17468
|
+
align: "center",
|
|
17469
|
+
style: { gap: reactComponents.tokens.spacingHorizontalSNudge },
|
|
17470
|
+
children: [
|
|
17471
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17472
|
+
reactComponents.Body1Stronger,
|
|
17473
|
+
{
|
|
17474
|
+
style: {
|
|
17475
|
+
color: reactComponents.tokens.colorNeutralStrokeAccessible
|
|
17476
|
+
},
|
|
17477
|
+
children: modalHeaderInfo.departureHarbor
|
|
17478
|
+
}
|
|
17479
|
+
),
|
|
17480
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowRightRegular, {}),
|
|
17481
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17482
|
+
reactComponents.Body1Stronger,
|
|
17483
|
+
{
|
|
17484
|
+
style: {
|
|
17485
|
+
color: reactComponents.tokens.colorNeutralStrokeAccessible
|
|
17486
|
+
},
|
|
17487
|
+
children: modalHeaderInfo.arrivalHarbor
|
|
17488
|
+
}
|
|
17489
|
+
)
|
|
17490
|
+
]
|
|
17045
17491
|
}
|
|
17046
|
-
)
|
|
17492
|
+
) }),
|
|
17493
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17494
|
+
reactComponents.Body1,
|
|
17495
|
+
{
|
|
17496
|
+
style: { color: reactComponents.tokens.colorNeutralStrokeAccessible },
|
|
17497
|
+
children: modalHeaderInfo.vehicleGroupLabel
|
|
17498
|
+
}
|
|
17499
|
+
) })
|
|
17047
17500
|
] }),
|
|
17048
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
17049
|
-
mergedLabels.
|
|
17050
|
-
|
|
17051
|
-
|
|
17052
|
-
|
|
17053
|
-
)
|
|
17501
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, style: { gap: reactComponents.tokens.spacingVerticalMNudge }, children: [
|
|
17502
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Stronger, { children: mergedLabels.passengerDetailHeader }) }),
|
|
17503
|
+
passengerItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17504
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.label }),
|
|
17505
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: formatCurrency(item.price) })
|
|
17506
|
+
] }) }, item.key))
|
|
17507
|
+
] }),
|
|
17508
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
|
|
17509
|
+
addonItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
17510
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
17511
|
+
reactGridSystem.Row,
|
|
17512
|
+
{
|
|
17513
|
+
nogutter: true,
|
|
17514
|
+
style: { gap: reactComponents.tokens.spacingVerticalMNudge },
|
|
17515
|
+
children: [
|
|
17516
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Stronger, { children: mergedLabels.addonHeader }) }),
|
|
17517
|
+
addonItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17518
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.label }),
|
|
17519
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: formatCurrency(item.price) })
|
|
17520
|
+
] }) }, item.key))
|
|
17521
|
+
]
|
|
17522
|
+
}
|
|
17523
|
+
),
|
|
17524
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {})
|
|
17525
|
+
] }),
|
|
17526
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, style: { gap: reactComponents.tokens.spacingVerticalMNudge }, children: [
|
|
17527
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Stronger, { children: mergedLabels.departureFareHeader }) }),
|
|
17528
|
+
finalDepartureItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17529
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.label }),
|
|
17530
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: formatCurrency(item.price) })
|
|
17531
|
+
] }) }, item.key))
|
|
17532
|
+
] }),
|
|
17533
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
|
|
17534
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17535
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.subTotalLabel }),
|
|
17536
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Stronger, { children: formatCurrency(subTotal) })
|
|
17537
|
+
] }),
|
|
17538
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, style: { gap: reactComponents.tokens.spacingVerticalS }, children: [
|
|
17539
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17540
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: mergedLabels.discountLabel }),
|
|
17541
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { children: [
|
|
17542
|
+
"(-) ",
|
|
17543
|
+
formatCurrency(discountAmount)
|
|
17544
|
+
] })
|
|
17545
|
+
] }) }),
|
|
17546
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17547
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: mergedLabels.totalTagihanLabel }),
|
|
17548
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: formatCurrency(totalTagihan) })
|
|
17549
|
+
] }) }),
|
|
17550
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17551
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: mergedLabels.ppnLabel }),
|
|
17552
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: formatCurrency(taxAmount) })
|
|
17553
|
+
] }) })
|
|
17054
17554
|
] })
|
|
17055
|
-
] }),
|
|
17056
|
-
|
|
17057
|
-
"div",
|
|
17058
|
-
|
|
17059
|
-
|
|
17060
|
-
|
|
17061
|
-
|
|
17062
|
-
|
|
17063
|
-
|
|
17064
|
-
|
|
17065
|
-
|
|
17066
|
-
|
|
17555
|
+
] }) }),
|
|
17556
|
+
isRoundTrip && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
17557
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
|
|
17558
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.headerCard, children: [
|
|
17559
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
|
|
17560
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17561
|
+
"img",
|
|
17562
|
+
{
|
|
17563
|
+
src: roundTripModalHeaderInfo.logoUrl,
|
|
17564
|
+
width: 35,
|
|
17565
|
+
height: 24,
|
|
17566
|
+
alt: roundTripModalHeaderInfo.logoAlt
|
|
17567
|
+
}
|
|
17568
|
+
) }),
|
|
17569
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17570
|
+
reactComponents.Subtitle2,
|
|
17571
|
+
{
|
|
17572
|
+
style: { fontWeight: fontWeight.Medium },
|
|
17573
|
+
children: roundTripModalHeaderInfo.vesselName
|
|
17574
|
+
}
|
|
17575
|
+
) }),
|
|
17576
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17577
|
+
reactComponents.Badge,
|
|
17578
|
+
{
|
|
17579
|
+
size: "medium",
|
|
17580
|
+
appearance: "filled",
|
|
17581
|
+
iconPosition: "before",
|
|
17582
|
+
shape: "rounded",
|
|
17583
|
+
style: {
|
|
17584
|
+
backgroundColor: roundTripModalHeaderInfo.vesselTypeColor,
|
|
17585
|
+
borderRadius: reactComponents.tokens.borderRadiusXLarge
|
|
17586
|
+
},
|
|
17587
|
+
children: roundTripModalHeaderInfo.vesselType
|
|
17588
|
+
}
|
|
17589
|
+
) })
|
|
17590
|
+
] }) }),
|
|
17591
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
17592
|
+
reactGridSystem.Row,
|
|
17593
|
+
{
|
|
17594
|
+
nogutter: true,
|
|
17595
|
+
align: "center",
|
|
17596
|
+
style: { gap: reactComponents.tokens.spacingHorizontalSNudge },
|
|
17597
|
+
children: [
|
|
17598
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17599
|
+
reactComponents.Body1Stronger,
|
|
17600
|
+
{
|
|
17601
|
+
style: {
|
|
17602
|
+
color: reactComponents.tokens.colorNeutralStrokeAccessible
|
|
17603
|
+
},
|
|
17604
|
+
children: roundTripModalHeaderInfo.departureHarbor
|
|
17605
|
+
}
|
|
17606
|
+
),
|
|
17607
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowRightRegular, {}),
|
|
17608
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17609
|
+
reactComponents.Body1Stronger,
|
|
17610
|
+
{
|
|
17611
|
+
style: {
|
|
17612
|
+
color: reactComponents.tokens.colorNeutralStrokeAccessible
|
|
17613
|
+
},
|
|
17614
|
+
children: roundTripModalHeaderInfo.arrivalHarbor
|
|
17615
|
+
}
|
|
17616
|
+
)
|
|
17617
|
+
]
|
|
17618
|
+
}
|
|
17619
|
+
) }),
|
|
17620
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17621
|
+
reactComponents.Body1,
|
|
17622
|
+
{
|
|
17623
|
+
style: {
|
|
17624
|
+
color: reactComponents.tokens.colorNeutralStrokeAccessible
|
|
17625
|
+
},
|
|
17626
|
+
children: roundTripModalHeaderInfo.vehicleGroupLabel
|
|
17627
|
+
}
|
|
17628
|
+
) })
|
|
17629
|
+
] }),
|
|
17630
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { nogutter: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17631
|
+
reactComponents.Badge,
|
|
17632
|
+
{
|
|
17633
|
+
size: "extra-large",
|
|
17634
|
+
appearance: "tint",
|
|
17635
|
+
shape: "circular",
|
|
17636
|
+
className: styles.badgeRoundTripLilac,
|
|
17637
|
+
children: "Pulang Pergi (Keberangkatan)"
|
|
17638
|
+
}
|
|
17639
|
+
) }),
|
|
17640
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
17641
|
+
reactGridSystem.Row,
|
|
17642
|
+
{
|
|
17643
|
+
nogutter: true,
|
|
17644
|
+
style: { gap: reactComponents.tokens.spacingVerticalMNudge },
|
|
17645
|
+
children: [
|
|
17646
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Stronger, { children: mergedLabels.passengerDetailHeader }) }),
|
|
17647
|
+
roundTripPassengerItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17648
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.label }),
|
|
17649
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: formatCurrency(item.price) })
|
|
17650
|
+
] }) }, item.key))
|
|
17651
|
+
]
|
|
17652
|
+
}
|
|
17653
|
+
),
|
|
17654
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
|
|
17655
|
+
addonItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
17656
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
17657
|
+
reactGridSystem.Row,
|
|
17658
|
+
{
|
|
17659
|
+
nogutter: true,
|
|
17660
|
+
style: { gap: reactComponents.tokens.spacingVerticalMNudge },
|
|
17661
|
+
children: [
|
|
17662
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Stronger, { children: mergedLabels.addonHeader }) }),
|
|
17663
|
+
addonItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17664
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.label }),
|
|
17665
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: formatCurrency(item.price) })
|
|
17666
|
+
] }) }, item.key))
|
|
17667
|
+
]
|
|
17668
|
+
}
|
|
17669
|
+
),
|
|
17670
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {})
|
|
17671
|
+
] }),
|
|
17672
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
17673
|
+
reactGridSystem.Row,
|
|
17674
|
+
{
|
|
17675
|
+
nogutter: true,
|
|
17676
|
+
style: { gap: reactComponents.tokens.spacingVerticalMNudge },
|
|
17677
|
+
children: [
|
|
17678
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Stronger, { children: mergedLabels.departureFareHeader }) }),
|
|
17679
|
+
finalDepartureItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17680
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.label }),
|
|
17681
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: formatCurrency(item.price) })
|
|
17682
|
+
] }) }, item.key))
|
|
17683
|
+
]
|
|
17684
|
+
}
|
|
17685
|
+
)
|
|
17686
|
+
] }) }),
|
|
17687
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17688
|
+
reactComponents.Card,
|
|
17689
|
+
{
|
|
17690
|
+
className: styles.card,
|
|
17691
|
+
style: { marginTop: reactComponents.tokens.spacingVerticalL },
|
|
17692
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
|
|
17693
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.headerCard, children: [
|
|
17694
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
|
|
17695
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17696
|
+
"img",
|
|
17697
|
+
{
|
|
17698
|
+
src: roundTripModalHeaderInfo.logoUrl,
|
|
17699
|
+
width: 35,
|
|
17700
|
+
height: 24,
|
|
17701
|
+
alt: roundTripModalHeaderInfo.logoAlt
|
|
17702
|
+
}
|
|
17703
|
+
) }),
|
|
17704
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17705
|
+
reactComponents.Subtitle2,
|
|
17706
|
+
{
|
|
17707
|
+
style: { fontWeight: fontWeight.Medium },
|
|
17708
|
+
children: roundTripModalHeaderInfo.vesselName
|
|
17709
|
+
}
|
|
17710
|
+
) }),
|
|
17711
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17712
|
+
reactComponents.Badge,
|
|
17713
|
+
{
|
|
17714
|
+
size: "medium",
|
|
17715
|
+
appearance: "filled",
|
|
17716
|
+
iconPosition: "before",
|
|
17717
|
+
shape: "rounded",
|
|
17718
|
+
style: {
|
|
17719
|
+
borderRadius: reactComponents.tokens.borderRadiusXLarge,
|
|
17720
|
+
backgroundColor: roundTripModalHeaderInfo.vesselTypeColor
|
|
17721
|
+
},
|
|
17722
|
+
children: roundTripModalHeaderInfo.vesselType
|
|
17723
|
+
}
|
|
17724
|
+
) })
|
|
17725
|
+
] }) }),
|
|
17726
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
17727
|
+
reactGridSystem.Row,
|
|
17728
|
+
{
|
|
17729
|
+
nogutter: true,
|
|
17730
|
+
align: "center",
|
|
17731
|
+
style: { gap: reactComponents.tokens.spacingHorizontalSNudge },
|
|
17732
|
+
children: [
|
|
17733
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17734
|
+
reactComponents.Body1Stronger,
|
|
17735
|
+
{
|
|
17736
|
+
style: {
|
|
17737
|
+
color: reactComponents.tokens.colorNeutralStrokeAccessible
|
|
17738
|
+
},
|
|
17739
|
+
children: roundTripModalHeaderInfo.departureHarbor
|
|
17740
|
+
}
|
|
17741
|
+
),
|
|
17742
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowRightRegular, {}),
|
|
17743
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17744
|
+
reactComponents.Body1Stronger,
|
|
17745
|
+
{
|
|
17746
|
+
style: {
|
|
17747
|
+
color: reactComponents.tokens.colorNeutralStrokeAccessible
|
|
17748
|
+
},
|
|
17749
|
+
children: roundTripModalHeaderInfo.arrivalHarbor
|
|
17750
|
+
}
|
|
17751
|
+
)
|
|
17752
|
+
]
|
|
17753
|
+
}
|
|
17754
|
+
) }),
|
|
17755
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17756
|
+
reactComponents.Body1,
|
|
17757
|
+
{
|
|
17758
|
+
style: {
|
|
17759
|
+
color: reactComponents.tokens.colorNeutralStrokeAccessible
|
|
17760
|
+
},
|
|
17761
|
+
children: roundTripModalHeaderInfo.vehicleGroupLabel
|
|
17762
|
+
}
|
|
17763
|
+
) })
|
|
17764
|
+
] }),
|
|
17765
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { nogutter: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17766
|
+
reactComponents.Badge,
|
|
17767
|
+
{
|
|
17768
|
+
size: "extra-large",
|
|
17769
|
+
appearance: "outline",
|
|
17770
|
+
shape: "circular",
|
|
17771
|
+
color: "warning",
|
|
17772
|
+
className: styles.badgeRoundTripOrange,
|
|
17773
|
+
children: "Pulang Pergi (Kepulangan)"
|
|
17774
|
+
}
|
|
17775
|
+
) }),
|
|
17776
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
17777
|
+
reactGridSystem.Row,
|
|
17778
|
+
{
|
|
17779
|
+
nogutter: true,
|
|
17780
|
+
style: { gap: reactComponents.tokens.spacingVerticalMNudge },
|
|
17781
|
+
children: [
|
|
17782
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Stronger, { children: mergedLabels.passengerDetailHeader }) }),
|
|
17783
|
+
roundTripPassengerItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17784
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.label }),
|
|
17785
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: formatCurrency(item.price) })
|
|
17786
|
+
] }) }, item.key))
|
|
17787
|
+
]
|
|
17788
|
+
}
|
|
17789
|
+
),
|
|
17790
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
|
|
17791
|
+
roundTripAddonSource.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
17792
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
17793
|
+
reactGridSystem.Row,
|
|
17794
|
+
{
|
|
17795
|
+
nogutter: true,
|
|
17796
|
+
style: { gap: reactComponents.tokens.spacingVerticalMNudge },
|
|
17797
|
+
children: [
|
|
17798
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Stronger, { children: mergedLabels.addonHeader }) }),
|
|
17799
|
+
roundTripAddonSource.map((item) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17800
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.label }),
|
|
17801
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: formatCurrency(item.price) })
|
|
17802
|
+
] }) }, item.key))
|
|
17803
|
+
]
|
|
17804
|
+
}
|
|
17805
|
+
),
|
|
17806
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {})
|
|
17807
|
+
] }),
|
|
17808
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
17809
|
+
reactGridSystem.Row,
|
|
17810
|
+
{
|
|
17811
|
+
nogutter: true,
|
|
17812
|
+
style: { gap: reactComponents.tokens.spacingVerticalMNudge },
|
|
17813
|
+
children: [
|
|
17814
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Stronger, { children: mergedLabels.departureFareHeader }) }),
|
|
17815
|
+
roundTripFinalDepartureItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17816
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.label }),
|
|
17817
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: formatCurrency(item.price) })
|
|
17818
|
+
] }) }, item.key))
|
|
17819
|
+
]
|
|
17820
|
+
}
|
|
17067
17821
|
)
|
|
17068
17822
|
] })
|
|
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
|
-
|
|
17094
|
-
|
|
17095
|
-
|
|
17096
|
-
|
|
17097
|
-
|
|
17098
|
-
|
|
17099
|
-
|
|
17100
|
-
|
|
17101
|
-
|
|
17102
|
-
|
|
17823
|
+
}
|
|
17824
|
+
),
|
|
17825
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
17826
|
+
reactGridSystem.Row,
|
|
17827
|
+
{
|
|
17828
|
+
nogutter: true,
|
|
17829
|
+
style: {
|
|
17830
|
+
gap: reactComponents.tokens.spacingVerticalL,
|
|
17831
|
+
marginTop: reactComponents.tokens.spacingVerticalL
|
|
17832
|
+
},
|
|
17833
|
+
children: [
|
|
17834
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17835
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: mergedLabels.subTotalLabel }),
|
|
17836
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: formatCurrency(roundTripSubTotal ?? subTotal) })
|
|
17837
|
+
] }) }),
|
|
17838
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
|
|
17839
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, style: { gap: reactComponents.tokens.spacingVerticalS }, children: [
|
|
17840
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17841
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: mergedLabels.discountLabel }),
|
|
17842
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { children: [
|
|
17843
|
+
"(-)",
|
|
17844
|
+
" ",
|
|
17845
|
+
formatCurrency(
|
|
17846
|
+
roundTripDiscountAmount ?? discountAmount
|
|
17847
|
+
)
|
|
17848
|
+
] })
|
|
17849
|
+
] }) }),
|
|
17850
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17851
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: mergedLabels.totalTagihanLabel }),
|
|
17852
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: formatCurrency(roundTripTotalTagihan) })
|
|
17853
|
+
] }) }),
|
|
17854
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, justify: "between", children: [
|
|
17855
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: mergedLabels.ppnLabel }),
|
|
17856
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: formatCurrency(roundTripTaxValue) })
|
|
17857
|
+
] }) })
|
|
17858
|
+
] }) })
|
|
17859
|
+
]
|
|
17860
|
+
}
|
|
17103
17861
|
)
|
|
17104
17862
|
] })
|
|
17105
17863
|
] }),
|
|
17106
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: reactComponents.tokens.spacingVerticalL }, children: [
|
|
17107
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
|
|
17108
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.ppnLabel, children: mergedLabels.ppnLabel }),
|
|
17109
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.ppnValue, children: [
|
|
17110
|
-
mergedLabels.currencyCode,
|
|
17111
|
-
taxAmount.toLocaleString(
|
|
17112
|
-
language === "id" ? "id-ID" : "en-US"
|
|
17113
|
-
)
|
|
17114
|
-
] })
|
|
17115
|
-
] }),
|
|
17116
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ppnNote, children: mergedLabels.ppnNote })
|
|
17117
|
-
] }),
|
|
17118
17864
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
17119
17865
|
"div",
|
|
17120
17866
|
{
|
|
17121
17867
|
className: styles.row,
|
|
17122
17868
|
style: { marginTop: reactComponents.tokens.spacingVerticalXXL },
|
|
17123
17869
|
children: [
|
|
17124
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17125
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
17870
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { className: styles.grandTotalLabel, children: mergedLabels.grandTotalLabel }),
|
|
17871
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle1, { className: styles.grandTotalValue, children: [
|
|
17126
17872
|
mergedLabels.currencyPrefix,
|
|
17127
|
-
grandTotal.toLocaleString(
|
|
17128
|
-
language === "id" ? "id-ID" : "en-US"
|
|
17129
|
-
)
|
|
17873
|
+
(isRoundTrip ? roundTripGrandTotalValue : grandTotal).toLocaleString(locale)
|
|
17130
17874
|
] })
|
|
17131
17875
|
]
|
|
17132
17876
|
}
|
|
17133
17877
|
)
|
|
17134
|
-
] })
|
|
17878
|
+
] })
|
|
17135
17879
|
] }) })
|
|
17136
17880
|
}
|
|
17137
17881
|
);
|