@asdp/ferryui 0.1.22-dev.10319 → 0.1.22-dev.10353
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 +6 -4
- package/dist/index.d.ts +6 -4
- package/dist/index.js +290 -308
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +290 -308
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -408,10 +408,12 @@ var PASSENGER_TYPE = {
|
|
|
408
408
|
ELDERLY: 4
|
|
409
409
|
};
|
|
410
410
|
var IDENTITY_TYPE = {
|
|
411
|
-
KTP:
|
|
412
|
-
SIM:
|
|
413
|
-
|
|
414
|
-
|
|
411
|
+
KTP: "KTP",
|
|
412
|
+
SIM: "SIM",
|
|
413
|
+
KK: "KK",
|
|
414
|
+
KTA: "KTA",
|
|
415
|
+
PASSPORT: "PASSPORT",
|
|
416
|
+
LAINNYA: "LAINNYA"
|
|
415
417
|
};
|
|
416
418
|
var LOAD_TYPE = {
|
|
417
419
|
PEDESTRIAN: 1,
|
|
@@ -11470,10 +11472,10 @@ var ModalPassengerForm = ({
|
|
|
11470
11472
|
const watchIdentityTypeId = watch("identityTypeId");
|
|
11471
11473
|
const watchPassportCountryId = watch("countryId");
|
|
11472
11474
|
const watchBirthdate = watch("birthdate");
|
|
11473
|
-
const
|
|
11475
|
+
const _selectedIdentityType = idTypes.find(
|
|
11474
11476
|
(type) => type.id.toString() === watchIdentityTypeId
|
|
11475
11477
|
);
|
|
11476
|
-
const idRuleLengthMatch =
|
|
11478
|
+
const idRuleLengthMatch = _selectedIdentityType?.rule?.match(/\{(\d+)(?:,\d+)?\}/);
|
|
11477
11479
|
const dynamicMinLengthId = idRuleLengthMatch ? parseInt(idRuleLengthMatch[1], 10) : 6;
|
|
11478
11480
|
React.useEffect(() => {
|
|
11479
11481
|
reset(defaultValues);
|
|
@@ -11544,7 +11546,7 @@ var ModalPassengerForm = ({
|
|
|
11544
11546
|
ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
|
|
11545
11547
|
setCapturedImage(canvas.toDataURL("image/jpeg"));
|
|
11546
11548
|
stopCamera();
|
|
11547
|
-
if (scannedIdType === IDENTITY_TYPE.KTP) {
|
|
11549
|
+
if (scannedIdType === IDENTITY_TYPE.KTP.toString()) {
|
|
11548
11550
|
setScanStatus("reading");
|
|
11549
11551
|
} else {
|
|
11550
11552
|
setScanStatus("error");
|
|
@@ -11665,8 +11667,8 @@ var ModalPassengerForm = ({
|
|
|
11665
11667
|
const handleCloseModalSelectTypeId = () => {
|
|
11666
11668
|
setIsModalSelectIdTypeOpen(false);
|
|
11667
11669
|
};
|
|
11668
|
-
const handleSelectIdType = (
|
|
11669
|
-
setScannedIdType(
|
|
11670
|
+
const handleSelectIdType = (selectedIdentityTypeCode) => {
|
|
11671
|
+
setScannedIdType(selectedIdentityTypeCode);
|
|
11670
11672
|
setIsModalSelectIdTypeOpen(false);
|
|
11671
11673
|
setScanStatus("idle");
|
|
11672
11674
|
setIsModalScanOpen(true);
|
|
@@ -11710,11 +11712,11 @@ var ModalPassengerForm = ({
|
|
|
11710
11712
|
"div",
|
|
11711
11713
|
{
|
|
11712
11714
|
className: styles.idTypeItem,
|
|
11713
|
-
onClick: () => handleSelectIdType(
|
|
11715
|
+
onClick: () => handleSelectIdType(type.code),
|
|
11714
11716
|
onKeyDown: (e) => {
|
|
11715
11717
|
if (e.key === "Enter" || e.key === " ") {
|
|
11716
11718
|
e.preventDefault();
|
|
11717
|
-
handleSelectIdType(type.
|
|
11719
|
+
handleSelectIdType(type.code);
|
|
11718
11720
|
}
|
|
11719
11721
|
},
|
|
11720
11722
|
role: "button",
|
|
@@ -12093,8 +12095,8 @@ var ModalPassengerForm = ({
|
|
|
12093
12095
|
}
|
|
12094
12096
|
}
|
|
12095
12097
|
),
|
|
12096
|
-
watchIdentityTypeId ?
|
|
12097
|
-
|
|
12098
|
+
watchIdentityTypeId ? _selectedIdentityType?.code !== IDENTITY_TYPE.LAINNYA.toString() && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
12099
|
+
_selectedIdentityType?.code === IDENTITY_TYPE.PASSPORT.toString() && /* @__PURE__ */ jsxRuntime.jsx(
|
|
12098
12100
|
InputDynamic_default,
|
|
12099
12101
|
{
|
|
12100
12102
|
control,
|
|
@@ -12130,10 +12132,10 @@ var ModalPassengerForm = ({
|
|
|
12130
12132
|
dynamicMinLengthId.toString()
|
|
12131
12133
|
)
|
|
12132
12134
|
},
|
|
12133
|
-
...
|
|
12135
|
+
..._selectedIdentityType?.rule ? {
|
|
12134
12136
|
pattern: {
|
|
12135
12137
|
value: new RegExp(
|
|
12136
|
-
|
|
12138
|
+
_selectedIdentityType.rule
|
|
12137
12139
|
),
|
|
12138
12140
|
message: mergedErrors.invalidIdNumber
|
|
12139
12141
|
}
|
|
@@ -12141,8 +12143,8 @@ var ModalPassengerForm = ({
|
|
|
12141
12143
|
},
|
|
12142
12144
|
onChange: (val) => {
|
|
12143
12145
|
let cleaned = val;
|
|
12144
|
-
if (
|
|
12145
|
-
const match =
|
|
12146
|
+
if (_selectedIdentityType?.rule) {
|
|
12147
|
+
const match = _selectedIdentityType.rule.match(/\[(.*?)\]/);
|
|
12146
12148
|
if (match && match[1]) {
|
|
12147
12149
|
const filterRegex = new RegExp(
|
|
12148
12150
|
`[^${match[1]}]`,
|
|
@@ -12865,7 +12867,7 @@ var CardVehicleOwnerForm = ({
|
|
|
12865
12867
|
" ",
|
|
12866
12868
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
|
|
12867
12869
|
] }) }),
|
|
12868
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { lg:
|
|
12870
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { lg: 12, children: [
|
|
12869
12871
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
12870
12872
|
"div",
|
|
12871
12873
|
{
|
|
@@ -12968,36 +12970,10 @@ var CardVehicleOwnerForm = ({
|
|
|
12968
12970
|
children: mergedLabels.otherCompanyHelperText
|
|
12969
12971
|
}
|
|
12970
12972
|
)
|
|
12971
|
-
] }),
|
|
12972
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { lg: 6, children: [
|
|
12973
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "1rem" } }),
|
|
12974
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
|
|
12975
|
-
mergedLabels.estimatedVehicleWeightLabel,
|
|
12976
|
-
" ",
|
|
12977
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
|
|
12978
|
-
] }),
|
|
12979
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
12980
|
-
InputDynamic_default,
|
|
12981
|
-
{
|
|
12982
|
-
control,
|
|
12983
|
-
disabled,
|
|
12984
|
-
name: `owners.${index}.estimatedWeight`,
|
|
12985
|
-
placeholder: mergedLabels.inputNumberPlaceholder,
|
|
12986
|
-
required: true,
|
|
12987
|
-
size: "large",
|
|
12988
|
-
type: "number",
|
|
12989
|
-
onChange: (val) => {
|
|
12990
|
-
setValue(`owners.${index}.estimatedWeight`, val);
|
|
12991
|
-
onUpdateOwner(owner.id, {
|
|
12992
|
-
estimatedWeight: val
|
|
12993
|
-
});
|
|
12994
|
-
}
|
|
12995
|
-
}
|
|
12996
|
-
)
|
|
12997
12973
|
] })
|
|
12998
12974
|
] }),
|
|
12999
|
-
hasLoad && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
13000
|
-
/* @__PURE__ */ jsxRuntime.
|
|
12975
|
+
hasLoad && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
12976
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, children: [
|
|
13001
12977
|
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.cargoReceiverTitle }) }),
|
|
13002
12978
|
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { lg: 12, children: [
|
|
13003
12979
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -13112,8 +13088,8 @@ var CardVehicleOwnerForm = ({
|
|
|
13112
13088
|
}
|
|
13113
13089
|
)
|
|
13114
13090
|
] })
|
|
13115
|
-
] })
|
|
13116
|
-
/* @__PURE__ */ jsxRuntime.
|
|
13091
|
+
] }),
|
|
13092
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, children: [
|
|
13117
13093
|
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { lg: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
|
|
13118
13094
|
mergedLabels.logisticsCompanyTitle,
|
|
13119
13095
|
" ",
|
|
@@ -13229,10 +13205,10 @@ var CardVehicleOwnerForm = ({
|
|
|
13229
13205
|
children: mergedLabels.otherCompanyHelperText
|
|
13230
13206
|
}
|
|
13231
13207
|
)
|
|
13232
|
-
] })
|
|
13208
|
+
] })
|
|
13233
13209
|
] }),
|
|
13234
13210
|
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
|
|
13235
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { children: [
|
|
13211
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { xl: 6, children: [
|
|
13236
13212
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.originCityLabel }),
|
|
13237
13213
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13238
13214
|
InputDynamic_default,
|
|
@@ -13254,7 +13230,7 @@ var CardVehicleOwnerForm = ({
|
|
|
13254
13230
|
}
|
|
13255
13231
|
)
|
|
13256
13232
|
] }),
|
|
13257
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { children: [
|
|
13233
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { xl: 6, children: [
|
|
13258
13234
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.destinationCityLabel }),
|
|
13259
13235
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13260
13236
|
InputDynamic_default,
|
|
@@ -13275,6 +13251,32 @@ var CardVehicleOwnerForm = ({
|
|
|
13275
13251
|
type: "select"
|
|
13276
13252
|
}
|
|
13277
13253
|
)
|
|
13254
|
+
] }),
|
|
13255
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { lg: 12, children: [
|
|
13256
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "1rem" } }),
|
|
13257
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
|
|
13258
|
+
mergedLabels.estimatedVehicleWeightLabel,
|
|
13259
|
+
" ",
|
|
13260
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
|
|
13261
|
+
] }),
|
|
13262
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13263
|
+
InputDynamic_default,
|
|
13264
|
+
{
|
|
13265
|
+
control,
|
|
13266
|
+
disabled,
|
|
13267
|
+
name: `owners.${index}.estimatedWeight`,
|
|
13268
|
+
placeholder: mergedLabels.inputNumberPlaceholder,
|
|
13269
|
+
required: true,
|
|
13270
|
+
size: "large",
|
|
13271
|
+
type: "number",
|
|
13272
|
+
onChange: (val) => {
|
|
13273
|
+
setValue(`owners.${index}.estimatedWeight`, val);
|
|
13274
|
+
onUpdateOwner(owner.id, {
|
|
13275
|
+
estimatedWeight: val
|
|
13276
|
+
});
|
|
13277
|
+
}
|
|
13278
|
+
}
|
|
13279
|
+
)
|
|
13278
13280
|
] })
|
|
13279
13281
|
] }),
|
|
13280
13282
|
hasLoad && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
@@ -13318,7 +13320,7 @@ var CardVehicleOwnerForm = ({
|
|
|
13318
13320
|
),
|
|
13319
13321
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.form, children: [
|
|
13320
13322
|
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
|
|
13321
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md:
|
|
13323
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 6, children: [
|
|
13322
13324
|
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
|
|
13323
13325
|
mergedLabels.commodityLabel,
|
|
13324
13326
|
" ",
|
|
@@ -13355,7 +13357,7 @@ var CardVehicleOwnerForm = ({
|
|
|
13355
13357
|
}
|
|
13356
13358
|
)
|
|
13357
13359
|
] }),
|
|
13358
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md:
|
|
13360
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 6, children: [
|
|
13359
13361
|
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
|
|
13360
13362
|
mergedLabels.cargoTypeLabel,
|
|
13361
13363
|
" ",
|
|
@@ -13410,260 +13412,7 @@ var CardVehicleOwnerForm = ({
|
|
|
13410
13412
|
children: mergedLabels.cargoTypeHelperText
|
|
13411
13413
|
}
|
|
13412
13414
|
)
|
|
13413
|
-
] })
|
|
13414
|
-
(() => {
|
|
13415
|
-
const type = watch(
|
|
13416
|
-
`owners.${index}.cargo.${cargoIndex}.cargoType`
|
|
13417
|
-
);
|
|
13418
|
-
const selectedLoadType2 = loadTypes.find(
|
|
13419
|
-
(loadType) => loadType.id.toString() === type
|
|
13420
|
-
);
|
|
13421
|
-
if (!selectedLoadType2) {
|
|
13422
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
|
|
13423
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.priceLabel }),
|
|
13424
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13425
|
-
reactComponents.Body2,
|
|
13426
|
-
{
|
|
13427
|
-
style: { marginTop: "0.5rem" },
|
|
13428
|
-
children: (() => {
|
|
13429
|
-
return new Intl.NumberFormat(
|
|
13430
|
-
"id-ID",
|
|
13431
|
-
{
|
|
13432
|
-
style: "currency",
|
|
13433
|
-
currency: "IDR",
|
|
13434
|
-
minimumFractionDigits: 0
|
|
13435
|
-
}
|
|
13436
|
-
).format(0);
|
|
13437
|
-
})()
|
|
13438
|
-
}
|
|
13439
|
-
)
|
|
13440
|
-
] });
|
|
13441
|
-
}
|
|
13442
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
13443
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
|
|
13444
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.cargoQuantityLabel }),
|
|
13445
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
13446
|
-
"div",
|
|
13447
|
-
{
|
|
13448
|
-
style: {
|
|
13449
|
-
display: "flex",
|
|
13450
|
-
alignItems: "center",
|
|
13451
|
-
border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
|
|
13452
|
-
borderRadius: reactComponents.tokens.borderRadiusMedium,
|
|
13453
|
-
height: "40px",
|
|
13454
|
-
padding: "0 12px",
|
|
13455
|
-
backgroundColor: reactComponents.tokens.colorNeutralBackground1
|
|
13456
|
-
},
|
|
13457
|
-
children: [
|
|
13458
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 0.5 } }),
|
|
13459
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
13460
|
-
"div",
|
|
13461
|
-
{
|
|
13462
|
-
style: {
|
|
13463
|
-
display: "flex",
|
|
13464
|
-
alignItems: "center",
|
|
13465
|
-
gap: "12px"
|
|
13466
|
-
},
|
|
13467
|
-
children: [
|
|
13468
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13469
|
-
reactComponents.Button,
|
|
13470
|
-
{
|
|
13471
|
-
appearance: "transparent",
|
|
13472
|
-
disabled,
|
|
13473
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13474
|
-
react.Icon,
|
|
13475
|
-
{
|
|
13476
|
-
icon: "fluent:subtract-circle-24-regular",
|
|
13477
|
-
style: {
|
|
13478
|
-
fontSize: "24px",
|
|
13479
|
-
color: reactComponents.tokens.colorNeutralForeground4
|
|
13480
|
-
}
|
|
13481
|
-
}
|
|
13482
|
-
),
|
|
13483
|
-
"aria-label": mergedLabels.decrementQuantityAriaLabel,
|
|
13484
|
-
size: "small",
|
|
13485
|
-
onClick: () => {
|
|
13486
|
-
const currentVal = getValues(
|
|
13487
|
-
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
13488
|
-
) || 0;
|
|
13489
|
-
const currentQty = Number(currentVal);
|
|
13490
|
-
if (currentQty > 1) {
|
|
13491
|
-
const newVal = currentQty - 1;
|
|
13492
|
-
setValue(
|
|
13493
|
-
`owners.${index}.cargo.${cargoIndex}.quantity`,
|
|
13494
|
-
newVal
|
|
13495
|
-
);
|
|
13496
|
-
onUpdateCargoQuantity(
|
|
13497
|
-
owner.id,
|
|
13498
|
-
cargo.id,
|
|
13499
|
-
newVal
|
|
13500
|
-
);
|
|
13501
|
-
}
|
|
13502
|
-
},
|
|
13503
|
-
style: {
|
|
13504
|
-
minWidth: "32px",
|
|
13505
|
-
padding: "0"
|
|
13506
|
-
}
|
|
13507
|
-
}
|
|
13508
|
-
),
|
|
13509
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "40px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13510
|
-
reactHookForm.Controller,
|
|
13511
|
-
{
|
|
13512
|
-
name: `owners.${index}.cargo.${cargoIndex}.quantity`,
|
|
13513
|
-
control,
|
|
13514
|
-
disabled,
|
|
13515
|
-
render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
13516
|
-
"input",
|
|
13517
|
-
{
|
|
13518
|
-
...field,
|
|
13519
|
-
min: 1,
|
|
13520
|
-
step: "1",
|
|
13521
|
-
type: "number",
|
|
13522
|
-
style: {
|
|
13523
|
-
border: "none",
|
|
13524
|
-
width: "100%",
|
|
13525
|
-
textAlign: "center",
|
|
13526
|
-
outline: "none",
|
|
13527
|
-
backgroundColor: "transparent",
|
|
13528
|
-
color: reactComponents.tokens.colorNeutralForeground1,
|
|
13529
|
-
fontSize: reactComponents.tokens.fontSizeBase400,
|
|
13530
|
-
fontFamily: reactComponents.tokens.fontFamilyBase
|
|
13531
|
-
},
|
|
13532
|
-
onKeyDown: (e) => {
|
|
13533
|
-
if ([
|
|
13534
|
-
"e",
|
|
13535
|
-
"E",
|
|
13536
|
-
"+",
|
|
13537
|
-
"-",
|
|
13538
|
-
".",
|
|
13539
|
-
","
|
|
13540
|
-
].includes(e.key)) {
|
|
13541
|
-
e.preventDefault();
|
|
13542
|
-
}
|
|
13543
|
-
},
|
|
13544
|
-
onPaste: (e) => {
|
|
13545
|
-
const paste = e.clipboardData.getData(
|
|
13546
|
-
"text"
|
|
13547
|
-
);
|
|
13548
|
-
if (!/^\d+$/.test(paste)) {
|
|
13549
|
-
e.preventDefault();
|
|
13550
|
-
}
|
|
13551
|
-
},
|
|
13552
|
-
onWheel: (e) => e.target.blur(),
|
|
13553
|
-
onChange: (e) => {
|
|
13554
|
-
const newVal = Number(
|
|
13555
|
-
e.target.value
|
|
13556
|
-
);
|
|
13557
|
-
field.onChange(e);
|
|
13558
|
-
onUpdateCargoQuantity(
|
|
13559
|
-
owner.id,
|
|
13560
|
-
cargo.id,
|
|
13561
|
-
newVal
|
|
13562
|
-
);
|
|
13563
|
-
}
|
|
13564
|
-
}
|
|
13565
|
-
),
|
|
13566
|
-
rules: {
|
|
13567
|
-
required: true,
|
|
13568
|
-
validate: (val) => Number(val) > 0
|
|
13569
|
-
}
|
|
13570
|
-
}
|
|
13571
|
-
) }),
|
|
13572
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13573
|
-
reactComponents.Button,
|
|
13574
|
-
{
|
|
13575
|
-
appearance: "transparent",
|
|
13576
|
-
disabled,
|
|
13577
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13578
|
-
react.Icon,
|
|
13579
|
-
{
|
|
13580
|
-
icon: "fluent:add-circle-24-regular",
|
|
13581
|
-
style: {
|
|
13582
|
-
fontSize: "24px",
|
|
13583
|
-
color: reactComponents.tokens.colorBrandStroke1
|
|
13584
|
-
}
|
|
13585
|
-
}
|
|
13586
|
-
),
|
|
13587
|
-
"aria-label": mergedLabels.incrementQuantityAriaLabel,
|
|
13588
|
-
size: "small",
|
|
13589
|
-
onClick: () => {
|
|
13590
|
-
const currentVal = getValues(
|
|
13591
|
-
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
13592
|
-
) || 0;
|
|
13593
|
-
const currentQty = Number(currentVal);
|
|
13594
|
-
const newVal = currentQty + 1;
|
|
13595
|
-
setValue(
|
|
13596
|
-
`owners.${index}.cargo.${cargoIndex}.quantity`,
|
|
13597
|
-
newVal
|
|
13598
|
-
);
|
|
13599
|
-
onUpdateCargoQuantity(
|
|
13600
|
-
owner.id,
|
|
13601
|
-
cargo.id,
|
|
13602
|
-
newVal
|
|
13603
|
-
);
|
|
13604
|
-
},
|
|
13605
|
-
style: {
|
|
13606
|
-
minWidth: "32px",
|
|
13607
|
-
padding: "0"
|
|
13608
|
-
}
|
|
13609
|
-
}
|
|
13610
|
-
)
|
|
13611
|
-
]
|
|
13612
|
-
}
|
|
13613
|
-
),
|
|
13614
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13615
|
-
"div",
|
|
13616
|
-
{
|
|
13617
|
-
style: {
|
|
13618
|
-
flex: 1,
|
|
13619
|
-
textAlign: "left",
|
|
13620
|
-
color: reactComponents.tokens.colorNeutralForeground1,
|
|
13621
|
-
fontSize: reactComponents.tokens.fontSizeBase300,
|
|
13622
|
-
paddingRight: "8px"
|
|
13623
|
-
},
|
|
13624
|
-
children: (() => {
|
|
13625
|
-
const type2 = watch(
|
|
13626
|
-
`owners.${index}.cargo.${cargoIndex}.cargoType`
|
|
13627
|
-
);
|
|
13628
|
-
const selectedLoadType3 = loadTypes.find(
|
|
13629
|
-
(loadType) => loadType.id.toString() === type2
|
|
13630
|
-
);
|
|
13631
|
-
return selectedLoadType3?.unit?.name;
|
|
13632
|
-
})()
|
|
13633
|
-
}
|
|
13634
|
-
)
|
|
13635
|
-
]
|
|
13636
|
-
}
|
|
13637
|
-
)
|
|
13638
|
-
] }),
|
|
13639
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
|
|
13640
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 0.5 } }),
|
|
13641
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.priceLabel }),
|
|
13642
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13643
|
-
reactComponents.Body2,
|
|
13644
|
-
{
|
|
13645
|
-
style: { marginTop: "0.5rem" },
|
|
13646
|
-
children: (() => {
|
|
13647
|
-
return new Intl.NumberFormat(
|
|
13648
|
-
"id-ID",
|
|
13649
|
-
{
|
|
13650
|
-
style: "currency",
|
|
13651
|
-
currency: "IDR",
|
|
13652
|
-
minimumFractionDigits: 0
|
|
13653
|
-
}
|
|
13654
|
-
).format(
|
|
13655
|
-
Number(
|
|
13656
|
-
getValues(
|
|
13657
|
-
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
13658
|
-
) || 0
|
|
13659
|
-
) * (selectedLoadType2?.price || 0)
|
|
13660
|
-
);
|
|
13661
|
-
})()
|
|
13662
|
-
}
|
|
13663
|
-
)
|
|
13664
|
-
] })
|
|
13665
|
-
] });
|
|
13666
|
-
})()
|
|
13415
|
+
] })
|
|
13667
13416
|
] }),
|
|
13668
13417
|
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
|
|
13669
13418
|
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 6, children: [
|
|
@@ -13767,7 +13516,240 @@ var CardVehicleOwnerForm = ({
|
|
|
13767
13516
|
},
|
|
13768
13517
|
children: mergedLabels.deleteCargoButton
|
|
13769
13518
|
}
|
|
13770
|
-
) }) })
|
|
13519
|
+
) }) }),
|
|
13520
|
+
(() => {
|
|
13521
|
+
const type = watch(
|
|
13522
|
+
`owners.${index}.cargo.${cargoIndex}.cargoType`
|
|
13523
|
+
);
|
|
13524
|
+
const _selectedLoadType = loadTypes.find(
|
|
13525
|
+
(loadType) => loadType.id.toString() === type
|
|
13526
|
+
);
|
|
13527
|
+
if (!_selectedLoadType) return null;
|
|
13528
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
|
|
13529
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 12, children: [
|
|
13530
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.cargoQuantityLabel }),
|
|
13531
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
13532
|
+
"div",
|
|
13533
|
+
{
|
|
13534
|
+
style: {
|
|
13535
|
+
display: "flex",
|
|
13536
|
+
alignItems: "center",
|
|
13537
|
+
border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
|
|
13538
|
+
borderRadius: reactComponents.tokens.borderRadiusMedium,
|
|
13539
|
+
height: "40px",
|
|
13540
|
+
padding: "0 12px",
|
|
13541
|
+
backgroundColor: reactComponents.tokens.colorNeutralBackground1
|
|
13542
|
+
},
|
|
13543
|
+
children: [
|
|
13544
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 0.5 } }),
|
|
13545
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
13546
|
+
"div",
|
|
13547
|
+
{
|
|
13548
|
+
style: {
|
|
13549
|
+
display: "flex",
|
|
13550
|
+
alignItems: "center",
|
|
13551
|
+
gap: "12px"
|
|
13552
|
+
},
|
|
13553
|
+
children: [
|
|
13554
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13555
|
+
reactComponents.Button,
|
|
13556
|
+
{
|
|
13557
|
+
appearance: "transparent",
|
|
13558
|
+
disabled,
|
|
13559
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13560
|
+
react.Icon,
|
|
13561
|
+
{
|
|
13562
|
+
icon: "fluent:subtract-circle-24-regular",
|
|
13563
|
+
style: {
|
|
13564
|
+
fontSize: "24px",
|
|
13565
|
+
color: reactComponents.tokens.colorNeutralForeground4
|
|
13566
|
+
}
|
|
13567
|
+
}
|
|
13568
|
+
),
|
|
13569
|
+
"aria-label": mergedLabels.decrementQuantityAriaLabel,
|
|
13570
|
+
size: "small",
|
|
13571
|
+
onClick: () => {
|
|
13572
|
+
const currentVal = getValues(
|
|
13573
|
+
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
13574
|
+
) || 0;
|
|
13575
|
+
const currentQty = Number(currentVal);
|
|
13576
|
+
if (currentQty > 1) {
|
|
13577
|
+
const newVal = currentQty - 1;
|
|
13578
|
+
setValue(
|
|
13579
|
+
`owners.${index}.cargo.${cargoIndex}.quantity`,
|
|
13580
|
+
newVal
|
|
13581
|
+
);
|
|
13582
|
+
onUpdateCargoQuantity(
|
|
13583
|
+
owner.id,
|
|
13584
|
+
cargo.id,
|
|
13585
|
+
newVal
|
|
13586
|
+
);
|
|
13587
|
+
}
|
|
13588
|
+
},
|
|
13589
|
+
style: {
|
|
13590
|
+
minWidth: "32px",
|
|
13591
|
+
padding: "0"
|
|
13592
|
+
}
|
|
13593
|
+
}
|
|
13594
|
+
),
|
|
13595
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "40px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13596
|
+
reactHookForm.Controller,
|
|
13597
|
+
{
|
|
13598
|
+
name: `owners.${index}.cargo.${cargoIndex}.quantity`,
|
|
13599
|
+
control,
|
|
13600
|
+
disabled,
|
|
13601
|
+
render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
13602
|
+
"input",
|
|
13603
|
+
{
|
|
13604
|
+
...field,
|
|
13605
|
+
min: 1,
|
|
13606
|
+
step: "1",
|
|
13607
|
+
type: "number",
|
|
13608
|
+
style: {
|
|
13609
|
+
border: "none",
|
|
13610
|
+
width: "100%",
|
|
13611
|
+
textAlign: "center",
|
|
13612
|
+
outline: "none",
|
|
13613
|
+
backgroundColor: "transparent",
|
|
13614
|
+
color: reactComponents.tokens.colorNeutralForeground1,
|
|
13615
|
+
fontSize: reactComponents.tokens.fontSizeBase400,
|
|
13616
|
+
fontFamily: reactComponents.tokens.fontFamilyBase
|
|
13617
|
+
},
|
|
13618
|
+
onKeyDown: (e) => {
|
|
13619
|
+
if ([
|
|
13620
|
+
"e",
|
|
13621
|
+
"E",
|
|
13622
|
+
"+",
|
|
13623
|
+
"-",
|
|
13624
|
+
".",
|
|
13625
|
+
","
|
|
13626
|
+
].includes(e.key)) {
|
|
13627
|
+
e.preventDefault();
|
|
13628
|
+
}
|
|
13629
|
+
},
|
|
13630
|
+
onPaste: (e) => {
|
|
13631
|
+
const paste = e.clipboardData.getData(
|
|
13632
|
+
"text"
|
|
13633
|
+
);
|
|
13634
|
+
if (!/^\d+$/.test(paste)) {
|
|
13635
|
+
e.preventDefault();
|
|
13636
|
+
}
|
|
13637
|
+
},
|
|
13638
|
+
onWheel: (e) => e.target.blur(),
|
|
13639
|
+
onChange: (e) => {
|
|
13640
|
+
const newVal = Number(
|
|
13641
|
+
e.target.value
|
|
13642
|
+
);
|
|
13643
|
+
field.onChange(e);
|
|
13644
|
+
onUpdateCargoQuantity(
|
|
13645
|
+
owner.id,
|
|
13646
|
+
cargo.id,
|
|
13647
|
+
newVal
|
|
13648
|
+
);
|
|
13649
|
+
}
|
|
13650
|
+
}
|
|
13651
|
+
),
|
|
13652
|
+
rules: {
|
|
13653
|
+
required: true,
|
|
13654
|
+
validate: (val) => Number(val) > 0
|
|
13655
|
+
}
|
|
13656
|
+
}
|
|
13657
|
+
) }),
|
|
13658
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13659
|
+
reactComponents.Button,
|
|
13660
|
+
{
|
|
13661
|
+
appearance: "transparent",
|
|
13662
|
+
disabled,
|
|
13663
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13664
|
+
react.Icon,
|
|
13665
|
+
{
|
|
13666
|
+
icon: "fluent:add-circle-24-regular",
|
|
13667
|
+
style: {
|
|
13668
|
+
fontSize: "24px",
|
|
13669
|
+
color: reactComponents.tokens.colorBrandStroke1
|
|
13670
|
+
}
|
|
13671
|
+
}
|
|
13672
|
+
),
|
|
13673
|
+
"aria-label": mergedLabels.incrementQuantityAriaLabel,
|
|
13674
|
+
size: "small",
|
|
13675
|
+
onClick: () => {
|
|
13676
|
+
const currentVal = getValues(
|
|
13677
|
+
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
13678
|
+
) || 0;
|
|
13679
|
+
const currentQty = Number(currentVal);
|
|
13680
|
+
const newVal = currentQty + 1;
|
|
13681
|
+
setValue(
|
|
13682
|
+
`owners.${index}.cargo.${cargoIndex}.quantity`,
|
|
13683
|
+
newVal
|
|
13684
|
+
);
|
|
13685
|
+
onUpdateCargoQuantity(
|
|
13686
|
+
owner.id,
|
|
13687
|
+
cargo.id,
|
|
13688
|
+
newVal
|
|
13689
|
+
);
|
|
13690
|
+
},
|
|
13691
|
+
style: {
|
|
13692
|
+
minWidth: "32px",
|
|
13693
|
+
padding: "0"
|
|
13694
|
+
}
|
|
13695
|
+
}
|
|
13696
|
+
)
|
|
13697
|
+
]
|
|
13698
|
+
}
|
|
13699
|
+
),
|
|
13700
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13701
|
+
"div",
|
|
13702
|
+
{
|
|
13703
|
+
style: {
|
|
13704
|
+
flex: 1,
|
|
13705
|
+
textAlign: "left",
|
|
13706
|
+
color: reactComponents.tokens.colorNeutralForeground1,
|
|
13707
|
+
fontSize: reactComponents.tokens.fontSizeBase300,
|
|
13708
|
+
paddingRight: "8px"
|
|
13709
|
+
},
|
|
13710
|
+
children: (() => {
|
|
13711
|
+
const type2 = watch(
|
|
13712
|
+
`owners.${index}.cargo.${cargoIndex}.cargoType`
|
|
13713
|
+
);
|
|
13714
|
+
const selectedLoadType2 = loadTypes.find(
|
|
13715
|
+
(loadType) => loadType.id.toString() === type2
|
|
13716
|
+
);
|
|
13717
|
+
return selectedLoadType2?.unit?.name;
|
|
13718
|
+
})()
|
|
13719
|
+
}
|
|
13720
|
+
)
|
|
13721
|
+
]
|
|
13722
|
+
}
|
|
13723
|
+
)
|
|
13724
|
+
] }),
|
|
13725
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 12, children: [
|
|
13726
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 0.5 } }),
|
|
13727
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.priceLabel }),
|
|
13728
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13729
|
+
reactComponents.Body2,
|
|
13730
|
+
{
|
|
13731
|
+
style: { marginTop: "0.5rem" },
|
|
13732
|
+
children: (() => {
|
|
13733
|
+
return new Intl.NumberFormat(
|
|
13734
|
+
"id-ID",
|
|
13735
|
+
{
|
|
13736
|
+
style: "currency",
|
|
13737
|
+
currency: "IDR",
|
|
13738
|
+
minimumFractionDigits: 0
|
|
13739
|
+
}
|
|
13740
|
+
).format(
|
|
13741
|
+
Number(
|
|
13742
|
+
getValues(
|
|
13743
|
+
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
13744
|
+
) || 0
|
|
13745
|
+
) * (_selectedLoadType?.price || 0)
|
|
13746
|
+
);
|
|
13747
|
+
})()
|
|
13748
|
+
}
|
|
13749
|
+
)
|
|
13750
|
+
] })
|
|
13751
|
+
] });
|
|
13752
|
+
})()
|
|
13771
13753
|
] }) })
|
|
13772
13754
|
]
|
|
13773
13755
|
},
|