@asdp/ferryui 0.1.22-dev.10344 → 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.js +271 -291
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +271 -291
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -12867,7 +12867,7 @@ var CardVehicleOwnerForm = ({
|
|
|
12867
12867
|
" ",
|
|
12868
12868
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
|
|
12869
12869
|
] }) }),
|
|
12870
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { lg:
|
|
12870
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { lg: 12, children: [
|
|
12871
12871
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
12872
12872
|
"div",
|
|
12873
12873
|
{
|
|
@@ -12970,36 +12970,10 @@ var CardVehicleOwnerForm = ({
|
|
|
12970
12970
|
children: mergedLabels.otherCompanyHelperText
|
|
12971
12971
|
}
|
|
12972
12972
|
)
|
|
12973
|
-
] }),
|
|
12974
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { lg: 6, children: [
|
|
12975
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "1rem" } }),
|
|
12976
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
|
|
12977
|
-
mergedLabels.estimatedVehicleWeightLabel,
|
|
12978
|
-
" ",
|
|
12979
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
|
|
12980
|
-
] }),
|
|
12981
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
12982
|
-
InputDynamic_default,
|
|
12983
|
-
{
|
|
12984
|
-
control,
|
|
12985
|
-
disabled,
|
|
12986
|
-
name: `owners.${index}.estimatedWeight`,
|
|
12987
|
-
placeholder: mergedLabels.inputNumberPlaceholder,
|
|
12988
|
-
required: true,
|
|
12989
|
-
size: "large",
|
|
12990
|
-
type: "number",
|
|
12991
|
-
onChange: (val) => {
|
|
12992
|
-
setValue(`owners.${index}.estimatedWeight`, val);
|
|
12993
|
-
onUpdateOwner(owner.id, {
|
|
12994
|
-
estimatedWeight: val
|
|
12995
|
-
});
|
|
12996
|
-
}
|
|
12997
|
-
}
|
|
12998
|
-
)
|
|
12999
12973
|
] })
|
|
13000
12974
|
] }),
|
|
13001
|
-
hasLoad && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
13002
|
-
/* @__PURE__ */ jsxRuntime.
|
|
12975
|
+
hasLoad && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
12976
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, children: [
|
|
13003
12977
|
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.cargoReceiverTitle }) }),
|
|
13004
12978
|
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { lg: 12, children: [
|
|
13005
12979
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -13114,8 +13088,8 @@ var CardVehicleOwnerForm = ({
|
|
|
13114
13088
|
}
|
|
13115
13089
|
)
|
|
13116
13090
|
] })
|
|
13117
|
-
] })
|
|
13118
|
-
/* @__PURE__ */ jsxRuntime.
|
|
13091
|
+
] }),
|
|
13092
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, children: [
|
|
13119
13093
|
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { lg: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
|
|
13120
13094
|
mergedLabels.logisticsCompanyTitle,
|
|
13121
13095
|
" ",
|
|
@@ -13231,10 +13205,10 @@ var CardVehicleOwnerForm = ({
|
|
|
13231
13205
|
children: mergedLabels.otherCompanyHelperText
|
|
13232
13206
|
}
|
|
13233
13207
|
)
|
|
13234
|
-
] })
|
|
13208
|
+
] })
|
|
13235
13209
|
] }),
|
|
13236
13210
|
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
|
|
13237
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { children: [
|
|
13211
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { xl: 6, children: [
|
|
13238
13212
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.originCityLabel }),
|
|
13239
13213
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13240
13214
|
InputDynamic_default,
|
|
@@ -13256,7 +13230,7 @@ var CardVehicleOwnerForm = ({
|
|
|
13256
13230
|
}
|
|
13257
13231
|
)
|
|
13258
13232
|
] }),
|
|
13259
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { children: [
|
|
13233
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { xl: 6, children: [
|
|
13260
13234
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.destinationCityLabel }),
|
|
13261
13235
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13262
13236
|
InputDynamic_default,
|
|
@@ -13277,6 +13251,32 @@ var CardVehicleOwnerForm = ({
|
|
|
13277
13251
|
type: "select"
|
|
13278
13252
|
}
|
|
13279
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
|
+
)
|
|
13280
13280
|
] })
|
|
13281
13281
|
] }),
|
|
13282
13282
|
hasLoad && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
@@ -13320,7 +13320,7 @@ var CardVehicleOwnerForm = ({
|
|
|
13320
13320
|
),
|
|
13321
13321
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.form, children: [
|
|
13322
13322
|
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
|
|
13323
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md:
|
|
13323
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 6, children: [
|
|
13324
13324
|
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
|
|
13325
13325
|
mergedLabels.commodityLabel,
|
|
13326
13326
|
" ",
|
|
@@ -13357,7 +13357,7 @@ var CardVehicleOwnerForm = ({
|
|
|
13357
13357
|
}
|
|
13358
13358
|
)
|
|
13359
13359
|
] }),
|
|
13360
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md:
|
|
13360
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 6, children: [
|
|
13361
13361
|
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
|
|
13362
13362
|
mergedLabels.cargoTypeLabel,
|
|
13363
13363
|
" ",
|
|
@@ -13412,260 +13412,7 @@ var CardVehicleOwnerForm = ({
|
|
|
13412
13412
|
children: mergedLabels.cargoTypeHelperText
|
|
13413
13413
|
}
|
|
13414
13414
|
)
|
|
13415
|
-
] })
|
|
13416
|
-
(() => {
|
|
13417
|
-
const type = watch(
|
|
13418
|
-
`owners.${index}.cargo.${cargoIndex}.cargoType`
|
|
13419
|
-
);
|
|
13420
|
-
const selectedLoadType2 = loadTypes.find(
|
|
13421
|
-
(loadType) => loadType.id.toString() === type
|
|
13422
|
-
);
|
|
13423
|
-
if (!selectedLoadType2) {
|
|
13424
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
|
|
13425
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.priceLabel }),
|
|
13426
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13427
|
-
reactComponents.Body2,
|
|
13428
|
-
{
|
|
13429
|
-
style: { marginTop: "0.5rem" },
|
|
13430
|
-
children: (() => {
|
|
13431
|
-
return new Intl.NumberFormat(
|
|
13432
|
-
"id-ID",
|
|
13433
|
-
{
|
|
13434
|
-
style: "currency",
|
|
13435
|
-
currency: "IDR",
|
|
13436
|
-
minimumFractionDigits: 0
|
|
13437
|
-
}
|
|
13438
|
-
).format(0);
|
|
13439
|
-
})()
|
|
13440
|
-
}
|
|
13441
|
-
)
|
|
13442
|
-
] });
|
|
13443
|
-
}
|
|
13444
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
13445
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
|
|
13446
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.cargoQuantityLabel }),
|
|
13447
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
13448
|
-
"div",
|
|
13449
|
-
{
|
|
13450
|
-
style: {
|
|
13451
|
-
display: "flex",
|
|
13452
|
-
alignItems: "center",
|
|
13453
|
-
border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
|
|
13454
|
-
borderRadius: reactComponents.tokens.borderRadiusMedium,
|
|
13455
|
-
height: "40px",
|
|
13456
|
-
padding: "0 12px",
|
|
13457
|
-
backgroundColor: reactComponents.tokens.colorNeutralBackground1
|
|
13458
|
-
},
|
|
13459
|
-
children: [
|
|
13460
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 0.5 } }),
|
|
13461
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
13462
|
-
"div",
|
|
13463
|
-
{
|
|
13464
|
-
style: {
|
|
13465
|
-
display: "flex",
|
|
13466
|
-
alignItems: "center",
|
|
13467
|
-
gap: "12px"
|
|
13468
|
-
},
|
|
13469
|
-
children: [
|
|
13470
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13471
|
-
reactComponents.Button,
|
|
13472
|
-
{
|
|
13473
|
-
appearance: "transparent",
|
|
13474
|
-
disabled,
|
|
13475
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13476
|
-
react.Icon,
|
|
13477
|
-
{
|
|
13478
|
-
icon: "fluent:subtract-circle-24-regular",
|
|
13479
|
-
style: {
|
|
13480
|
-
fontSize: "24px",
|
|
13481
|
-
color: reactComponents.tokens.colorNeutralForeground4
|
|
13482
|
-
}
|
|
13483
|
-
}
|
|
13484
|
-
),
|
|
13485
|
-
"aria-label": mergedLabels.decrementQuantityAriaLabel,
|
|
13486
|
-
size: "small",
|
|
13487
|
-
onClick: () => {
|
|
13488
|
-
const currentVal = getValues(
|
|
13489
|
-
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
13490
|
-
) || 0;
|
|
13491
|
-
const currentQty = Number(currentVal);
|
|
13492
|
-
if (currentQty > 1) {
|
|
13493
|
-
const newVal = currentQty - 1;
|
|
13494
|
-
setValue(
|
|
13495
|
-
`owners.${index}.cargo.${cargoIndex}.quantity`,
|
|
13496
|
-
newVal
|
|
13497
|
-
);
|
|
13498
|
-
onUpdateCargoQuantity(
|
|
13499
|
-
owner.id,
|
|
13500
|
-
cargo.id,
|
|
13501
|
-
newVal
|
|
13502
|
-
);
|
|
13503
|
-
}
|
|
13504
|
-
},
|
|
13505
|
-
style: {
|
|
13506
|
-
minWidth: "32px",
|
|
13507
|
-
padding: "0"
|
|
13508
|
-
}
|
|
13509
|
-
}
|
|
13510
|
-
),
|
|
13511
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "40px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13512
|
-
reactHookForm.Controller,
|
|
13513
|
-
{
|
|
13514
|
-
name: `owners.${index}.cargo.${cargoIndex}.quantity`,
|
|
13515
|
-
control,
|
|
13516
|
-
disabled,
|
|
13517
|
-
render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
13518
|
-
"input",
|
|
13519
|
-
{
|
|
13520
|
-
...field,
|
|
13521
|
-
min: 1,
|
|
13522
|
-
step: "1",
|
|
13523
|
-
type: "number",
|
|
13524
|
-
style: {
|
|
13525
|
-
border: "none",
|
|
13526
|
-
width: "100%",
|
|
13527
|
-
textAlign: "center",
|
|
13528
|
-
outline: "none",
|
|
13529
|
-
backgroundColor: "transparent",
|
|
13530
|
-
color: reactComponents.tokens.colorNeutralForeground1,
|
|
13531
|
-
fontSize: reactComponents.tokens.fontSizeBase400,
|
|
13532
|
-
fontFamily: reactComponents.tokens.fontFamilyBase
|
|
13533
|
-
},
|
|
13534
|
-
onKeyDown: (e) => {
|
|
13535
|
-
if ([
|
|
13536
|
-
"e",
|
|
13537
|
-
"E",
|
|
13538
|
-
"+",
|
|
13539
|
-
"-",
|
|
13540
|
-
".",
|
|
13541
|
-
","
|
|
13542
|
-
].includes(e.key)) {
|
|
13543
|
-
e.preventDefault();
|
|
13544
|
-
}
|
|
13545
|
-
},
|
|
13546
|
-
onPaste: (e) => {
|
|
13547
|
-
const paste = e.clipboardData.getData(
|
|
13548
|
-
"text"
|
|
13549
|
-
);
|
|
13550
|
-
if (!/^\d+$/.test(paste)) {
|
|
13551
|
-
e.preventDefault();
|
|
13552
|
-
}
|
|
13553
|
-
},
|
|
13554
|
-
onWheel: (e) => e.target.blur(),
|
|
13555
|
-
onChange: (e) => {
|
|
13556
|
-
const newVal = Number(
|
|
13557
|
-
e.target.value
|
|
13558
|
-
);
|
|
13559
|
-
field.onChange(e);
|
|
13560
|
-
onUpdateCargoQuantity(
|
|
13561
|
-
owner.id,
|
|
13562
|
-
cargo.id,
|
|
13563
|
-
newVal
|
|
13564
|
-
);
|
|
13565
|
-
}
|
|
13566
|
-
}
|
|
13567
|
-
),
|
|
13568
|
-
rules: {
|
|
13569
|
-
required: true,
|
|
13570
|
-
validate: (val) => Number(val) > 0
|
|
13571
|
-
}
|
|
13572
|
-
}
|
|
13573
|
-
) }),
|
|
13574
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13575
|
-
reactComponents.Button,
|
|
13576
|
-
{
|
|
13577
|
-
appearance: "transparent",
|
|
13578
|
-
disabled,
|
|
13579
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13580
|
-
react.Icon,
|
|
13581
|
-
{
|
|
13582
|
-
icon: "fluent:add-circle-24-regular",
|
|
13583
|
-
style: {
|
|
13584
|
-
fontSize: "24px",
|
|
13585
|
-
color: reactComponents.tokens.colorBrandStroke1
|
|
13586
|
-
}
|
|
13587
|
-
}
|
|
13588
|
-
),
|
|
13589
|
-
"aria-label": mergedLabels.incrementQuantityAriaLabel,
|
|
13590
|
-
size: "small",
|
|
13591
|
-
onClick: () => {
|
|
13592
|
-
const currentVal = getValues(
|
|
13593
|
-
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
13594
|
-
) || 0;
|
|
13595
|
-
const currentQty = Number(currentVal);
|
|
13596
|
-
const newVal = currentQty + 1;
|
|
13597
|
-
setValue(
|
|
13598
|
-
`owners.${index}.cargo.${cargoIndex}.quantity`,
|
|
13599
|
-
newVal
|
|
13600
|
-
);
|
|
13601
|
-
onUpdateCargoQuantity(
|
|
13602
|
-
owner.id,
|
|
13603
|
-
cargo.id,
|
|
13604
|
-
newVal
|
|
13605
|
-
);
|
|
13606
|
-
},
|
|
13607
|
-
style: {
|
|
13608
|
-
minWidth: "32px",
|
|
13609
|
-
padding: "0"
|
|
13610
|
-
}
|
|
13611
|
-
}
|
|
13612
|
-
)
|
|
13613
|
-
]
|
|
13614
|
-
}
|
|
13615
|
-
),
|
|
13616
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13617
|
-
"div",
|
|
13618
|
-
{
|
|
13619
|
-
style: {
|
|
13620
|
-
flex: 1,
|
|
13621
|
-
textAlign: "left",
|
|
13622
|
-
color: reactComponents.tokens.colorNeutralForeground1,
|
|
13623
|
-
fontSize: reactComponents.tokens.fontSizeBase300,
|
|
13624
|
-
paddingRight: "8px"
|
|
13625
|
-
},
|
|
13626
|
-
children: (() => {
|
|
13627
|
-
const type2 = watch(
|
|
13628
|
-
`owners.${index}.cargo.${cargoIndex}.cargoType`
|
|
13629
|
-
);
|
|
13630
|
-
const selectedLoadType3 = loadTypes.find(
|
|
13631
|
-
(loadType) => loadType.id.toString() === type2
|
|
13632
|
-
);
|
|
13633
|
-
return selectedLoadType3?.unit?.name;
|
|
13634
|
-
})()
|
|
13635
|
-
}
|
|
13636
|
-
)
|
|
13637
|
-
]
|
|
13638
|
-
}
|
|
13639
|
-
)
|
|
13640
|
-
] }),
|
|
13641
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
|
|
13642
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 0.5 } }),
|
|
13643
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.priceLabel }),
|
|
13644
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13645
|
-
reactComponents.Body2,
|
|
13646
|
-
{
|
|
13647
|
-
style: { marginTop: "0.5rem" },
|
|
13648
|
-
children: (() => {
|
|
13649
|
-
return new Intl.NumberFormat(
|
|
13650
|
-
"id-ID",
|
|
13651
|
-
{
|
|
13652
|
-
style: "currency",
|
|
13653
|
-
currency: "IDR",
|
|
13654
|
-
minimumFractionDigits: 0
|
|
13655
|
-
}
|
|
13656
|
-
).format(
|
|
13657
|
-
Number(
|
|
13658
|
-
getValues(
|
|
13659
|
-
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
13660
|
-
) || 0
|
|
13661
|
-
) * (selectedLoadType2?.price || 0)
|
|
13662
|
-
);
|
|
13663
|
-
})()
|
|
13664
|
-
}
|
|
13665
|
-
)
|
|
13666
|
-
] })
|
|
13667
|
-
] });
|
|
13668
|
-
})()
|
|
13415
|
+
] })
|
|
13669
13416
|
] }),
|
|
13670
13417
|
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
|
|
13671
13418
|
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 6, children: [
|
|
@@ -13769,7 +13516,240 @@ var CardVehicleOwnerForm = ({
|
|
|
13769
13516
|
},
|
|
13770
13517
|
children: mergedLabels.deleteCargoButton
|
|
13771
13518
|
}
|
|
13772
|
-
) }) })
|
|
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
|
+
})()
|
|
13773
13753
|
] }) })
|
|
13774
13754
|
]
|
|
13775
13755
|
},
|