@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.mjs CHANGED
@@ -399,10 +399,12 @@ var PASSENGER_TYPE = {
399
399
  ELDERLY: 4
400
400
  };
401
401
  var IDENTITY_TYPE = {
402
- KTP: 1,
403
- SIM: 2,
404
- PSP: 3,
405
- TGL: 4
402
+ KTP: "KTP",
403
+ SIM: "SIM",
404
+ KK: "KK",
405
+ KTA: "KTA",
406
+ PASSPORT: "PASSPORT",
407
+ LAINNYA: "LAINNYA"
406
408
  };
407
409
  var LOAD_TYPE = {
408
410
  PEDESTRIAN: 1,
@@ -11461,10 +11463,10 @@ var ModalPassengerForm = ({
11461
11463
  const watchIdentityTypeId = watch("identityTypeId");
11462
11464
  const watchPassportCountryId = watch("countryId");
11463
11465
  const watchBirthdate = watch("birthdate");
11464
- const selectedIdentityType = idTypes.find(
11466
+ const _selectedIdentityType = idTypes.find(
11465
11467
  (type) => type.id.toString() === watchIdentityTypeId
11466
11468
  );
11467
- const idRuleLengthMatch = selectedIdentityType?.rule?.match(/\{(\d+)(?:,\d+)?\}/);
11469
+ const idRuleLengthMatch = _selectedIdentityType?.rule?.match(/\{(\d+)(?:,\d+)?\}/);
11468
11470
  const dynamicMinLengthId = idRuleLengthMatch ? parseInt(idRuleLengthMatch[1], 10) : 6;
11469
11471
  useEffect(() => {
11470
11472
  reset(defaultValues);
@@ -11535,7 +11537,7 @@ var ModalPassengerForm = ({
11535
11537
  ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
11536
11538
  setCapturedImage(canvas.toDataURL("image/jpeg"));
11537
11539
  stopCamera();
11538
- if (scannedIdType === IDENTITY_TYPE.KTP) {
11540
+ if (scannedIdType === IDENTITY_TYPE.KTP.toString()) {
11539
11541
  setScanStatus("reading");
11540
11542
  } else {
11541
11543
  setScanStatus("error");
@@ -11656,8 +11658,8 @@ var ModalPassengerForm = ({
11656
11658
  const handleCloseModalSelectTypeId = () => {
11657
11659
  setIsModalSelectIdTypeOpen(false);
11658
11660
  };
11659
- const handleSelectIdType = (selectedIdType) => {
11660
- setScannedIdType(selectedIdType);
11661
+ const handleSelectIdType = (selectedIdentityTypeCode) => {
11662
+ setScannedIdType(selectedIdentityTypeCode);
11661
11663
  setIsModalSelectIdTypeOpen(false);
11662
11664
  setScanStatus("idle");
11663
11665
  setIsModalScanOpen(true);
@@ -11701,11 +11703,11 @@ var ModalPassengerForm = ({
11701
11703
  "div",
11702
11704
  {
11703
11705
  className: styles.idTypeItem,
11704
- onClick: () => handleSelectIdType(Number(type.id)),
11706
+ onClick: () => handleSelectIdType(type.code),
11705
11707
  onKeyDown: (e) => {
11706
11708
  if (e.key === "Enter" || e.key === " ") {
11707
11709
  e.preventDefault();
11708
- handleSelectIdType(type.id);
11710
+ handleSelectIdType(type.code);
11709
11711
  }
11710
11712
  },
11711
11713
  role: "button",
@@ -12084,8 +12086,8 @@ var ModalPassengerForm = ({
12084
12086
  }
12085
12087
  }
12086
12088
  ),
12087
- watchIdentityTypeId ? watchIdentityTypeId !== IDENTITY_TYPE.TGL.toString() && /* @__PURE__ */ jsxs(Fragment, { children: [
12088
- watchIdentityTypeId === IDENTITY_TYPE.PSP.toString() && /* @__PURE__ */ jsx(
12089
+ watchIdentityTypeId ? _selectedIdentityType?.code !== IDENTITY_TYPE.LAINNYA.toString() && /* @__PURE__ */ jsxs(Fragment, { children: [
12090
+ _selectedIdentityType?.code === IDENTITY_TYPE.PASSPORT.toString() && /* @__PURE__ */ jsx(
12089
12091
  InputDynamic_default,
12090
12092
  {
12091
12093
  control,
@@ -12121,10 +12123,10 @@ var ModalPassengerForm = ({
12121
12123
  dynamicMinLengthId.toString()
12122
12124
  )
12123
12125
  },
12124
- ...selectedIdentityType?.rule ? {
12126
+ ..._selectedIdentityType?.rule ? {
12125
12127
  pattern: {
12126
12128
  value: new RegExp(
12127
- selectedIdentityType.rule
12129
+ _selectedIdentityType.rule
12128
12130
  ),
12129
12131
  message: mergedErrors.invalidIdNumber
12130
12132
  }
@@ -12132,8 +12134,8 @@ var ModalPassengerForm = ({
12132
12134
  },
12133
12135
  onChange: (val) => {
12134
12136
  let cleaned = val;
12135
- if (selectedIdentityType?.rule) {
12136
- const match = selectedIdentityType.rule.match(/\[(.*?)\]/);
12137
+ if (_selectedIdentityType?.rule) {
12138
+ const match = _selectedIdentityType.rule.match(/\[(.*?)\]/);
12137
12139
  if (match && match[1]) {
12138
12140
  const filterRegex = new RegExp(
12139
12141
  `[^${match[1]}]`,
@@ -12856,7 +12858,7 @@ var CardVehicleOwnerForm = ({
12856
12858
  " ",
12857
12859
  /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
12858
12860
  ] }) }),
12859
- /* @__PURE__ */ jsxs(Col, { lg: 6, children: [
12861
+ /* @__PURE__ */ jsxs(Col, { lg: 12, children: [
12860
12862
  /* @__PURE__ */ jsx(
12861
12863
  "div",
12862
12864
  {
@@ -12959,36 +12961,10 @@ var CardVehicleOwnerForm = ({
12959
12961
  children: mergedLabels.otherCompanyHelperText
12960
12962
  }
12961
12963
  )
12962
- ] }),
12963
- /* @__PURE__ */ jsxs(Col, { lg: 6, children: [
12964
- /* @__PURE__ */ jsx("div", { style: { height: "1rem" } }),
12965
- /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
12966
- mergedLabels.estimatedVehicleWeightLabel,
12967
- " ",
12968
- /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
12969
- ] }),
12970
- /* @__PURE__ */ jsx(
12971
- InputDynamic_default,
12972
- {
12973
- control,
12974
- disabled,
12975
- name: `owners.${index}.estimatedWeight`,
12976
- placeholder: mergedLabels.inputNumberPlaceholder,
12977
- required: true,
12978
- size: "large",
12979
- type: "number",
12980
- onChange: (val) => {
12981
- setValue(`owners.${index}.estimatedWeight`, val);
12982
- onUpdateOwner(owner.id, {
12983
- estimatedWeight: val
12984
- });
12985
- }
12986
- }
12987
- )
12988
12964
  ] })
12989
12965
  ] }),
12990
- hasLoad && /* @__PURE__ */ jsxs(Row, { children: [
12991
- /* @__PURE__ */ jsx(Col, { lg: 6, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, children: [
12966
+ hasLoad && /* @__PURE__ */ jsxs(Fragment, { children: [
12967
+ /* @__PURE__ */ jsxs(Row, { nogutter: true, children: [
12992
12968
  /* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.cargoReceiverTitle }) }),
12993
12969
  /* @__PURE__ */ jsxs(Col, { lg: 12, children: [
12994
12970
  /* @__PURE__ */ jsx(
@@ -13103,8 +13079,8 @@ var CardVehicleOwnerForm = ({
13103
13079
  }
13104
13080
  )
13105
13081
  ] })
13106
- ] }) }),
13107
- /* @__PURE__ */ jsx(Col, { lg: 6, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, children: [
13082
+ ] }),
13083
+ /* @__PURE__ */ jsxs(Row, { nogutter: true, children: [
13108
13084
  /* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13109
13085
  mergedLabels.logisticsCompanyTitle,
13110
13086
  " ",
@@ -13220,10 +13196,10 @@ var CardVehicleOwnerForm = ({
13220
13196
  children: mergedLabels.otherCompanyHelperText
13221
13197
  }
13222
13198
  )
13223
- ] }) })
13199
+ ] })
13224
13200
  ] }),
13225
13201
  /* @__PURE__ */ jsxs(Row, { children: [
13226
- /* @__PURE__ */ jsxs(Col, { children: [
13202
+ /* @__PURE__ */ jsxs(Col, { xl: 6, children: [
13227
13203
  /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.originCityLabel }),
13228
13204
  /* @__PURE__ */ jsx(
13229
13205
  InputDynamic_default,
@@ -13245,7 +13221,7 @@ var CardVehicleOwnerForm = ({
13245
13221
  }
13246
13222
  )
13247
13223
  ] }),
13248
- /* @__PURE__ */ jsxs(Col, { children: [
13224
+ /* @__PURE__ */ jsxs(Col, { xl: 6, children: [
13249
13225
  /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.destinationCityLabel }),
13250
13226
  /* @__PURE__ */ jsx(
13251
13227
  InputDynamic_default,
@@ -13266,6 +13242,32 @@ var CardVehicleOwnerForm = ({
13266
13242
  type: "select"
13267
13243
  }
13268
13244
  )
13245
+ ] }),
13246
+ /* @__PURE__ */ jsxs(Col, { lg: 12, children: [
13247
+ /* @__PURE__ */ jsx("div", { style: { height: "1rem" } }),
13248
+ /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13249
+ mergedLabels.estimatedVehicleWeightLabel,
13250
+ " ",
13251
+ /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13252
+ ] }),
13253
+ /* @__PURE__ */ jsx(
13254
+ InputDynamic_default,
13255
+ {
13256
+ control,
13257
+ disabled,
13258
+ name: `owners.${index}.estimatedWeight`,
13259
+ placeholder: mergedLabels.inputNumberPlaceholder,
13260
+ required: true,
13261
+ size: "large",
13262
+ type: "number",
13263
+ onChange: (val) => {
13264
+ setValue(`owners.${index}.estimatedWeight`, val);
13265
+ onUpdateOwner(owner.id, {
13266
+ estimatedWeight: val
13267
+ });
13268
+ }
13269
+ }
13270
+ )
13269
13271
  ] })
13270
13272
  ] }),
13271
13273
  hasLoad && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -13309,7 +13311,7 @@ var CardVehicleOwnerForm = ({
13309
13311
  ),
13310
13312
  /* @__PURE__ */ jsx(AccordionPanel, { children: /* @__PURE__ */ jsxs("div", { className: styles.form, children: [
13311
13313
  /* @__PURE__ */ jsxs(Row, { children: [
13312
- /* @__PURE__ */ jsxs(Col, { md: 3, children: [
13314
+ /* @__PURE__ */ jsxs(Col, { md: 6, children: [
13313
13315
  /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13314
13316
  mergedLabels.commodityLabel,
13315
13317
  " ",
@@ -13346,7 +13348,7 @@ var CardVehicleOwnerForm = ({
13346
13348
  }
13347
13349
  )
13348
13350
  ] }),
13349
- /* @__PURE__ */ jsxs(Col, { md: 3, children: [
13351
+ /* @__PURE__ */ jsxs(Col, { md: 6, children: [
13350
13352
  /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13351
13353
  mergedLabels.cargoTypeLabel,
13352
13354
  " ",
@@ -13401,260 +13403,7 @@ var CardVehicleOwnerForm = ({
13401
13403
  children: mergedLabels.cargoTypeHelperText
13402
13404
  }
13403
13405
  )
13404
- ] }),
13405
- (() => {
13406
- const type = watch(
13407
- `owners.${index}.cargo.${cargoIndex}.cargoType`
13408
- );
13409
- const selectedLoadType2 = loadTypes.find(
13410
- (loadType) => loadType.id.toString() === type
13411
- );
13412
- if (!selectedLoadType2) {
13413
- return /* @__PURE__ */ jsxs(Col, { md: 3, children: [
13414
- /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.priceLabel }),
13415
- /* @__PURE__ */ jsx(
13416
- Body2,
13417
- {
13418
- style: { marginTop: "0.5rem" },
13419
- children: (() => {
13420
- return new Intl.NumberFormat(
13421
- "id-ID",
13422
- {
13423
- style: "currency",
13424
- currency: "IDR",
13425
- minimumFractionDigits: 0
13426
- }
13427
- ).format(0);
13428
- })()
13429
- }
13430
- )
13431
- ] });
13432
- }
13433
- return /* @__PURE__ */ jsxs(Fragment, { children: [
13434
- /* @__PURE__ */ jsxs(Col, { md: 3, children: [
13435
- /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.cargoQuantityLabel }),
13436
- /* @__PURE__ */ jsxs(
13437
- "div",
13438
- {
13439
- style: {
13440
- display: "flex",
13441
- alignItems: "center",
13442
- border: `1px solid ${tokens.colorNeutralStroke1}`,
13443
- borderRadius: tokens.borderRadiusMedium,
13444
- height: "40px",
13445
- padding: "0 12px",
13446
- backgroundColor: tokens.colorNeutralBackground1
13447
- },
13448
- children: [
13449
- /* @__PURE__ */ jsx("div", { style: { flex: 0.5 } }),
13450
- /* @__PURE__ */ jsxs(
13451
- "div",
13452
- {
13453
- style: {
13454
- display: "flex",
13455
- alignItems: "center",
13456
- gap: "12px"
13457
- },
13458
- children: [
13459
- /* @__PURE__ */ jsx(
13460
- Button,
13461
- {
13462
- appearance: "transparent",
13463
- disabled,
13464
- icon: /* @__PURE__ */ jsx(
13465
- Icon,
13466
- {
13467
- icon: "fluent:subtract-circle-24-regular",
13468
- style: {
13469
- fontSize: "24px",
13470
- color: tokens.colorNeutralForeground4
13471
- }
13472
- }
13473
- ),
13474
- "aria-label": mergedLabels.decrementQuantityAriaLabel,
13475
- size: "small",
13476
- onClick: () => {
13477
- const currentVal = getValues(
13478
- `owners.${index}.cargo.${cargoIndex}.quantity`
13479
- ) || 0;
13480
- const currentQty = Number(currentVal);
13481
- if (currentQty > 1) {
13482
- const newVal = currentQty - 1;
13483
- setValue(
13484
- `owners.${index}.cargo.${cargoIndex}.quantity`,
13485
- newVal
13486
- );
13487
- onUpdateCargoQuantity(
13488
- owner.id,
13489
- cargo.id,
13490
- newVal
13491
- );
13492
- }
13493
- },
13494
- style: {
13495
- minWidth: "32px",
13496
- padding: "0"
13497
- }
13498
- }
13499
- ),
13500
- /* @__PURE__ */ jsx("div", { style: { width: "40px" }, children: /* @__PURE__ */ jsx(
13501
- Controller,
13502
- {
13503
- name: `owners.${index}.cargo.${cargoIndex}.quantity`,
13504
- control,
13505
- disabled,
13506
- render: ({ field }) => /* @__PURE__ */ jsx(
13507
- "input",
13508
- {
13509
- ...field,
13510
- min: 1,
13511
- step: "1",
13512
- type: "number",
13513
- style: {
13514
- border: "none",
13515
- width: "100%",
13516
- textAlign: "center",
13517
- outline: "none",
13518
- backgroundColor: "transparent",
13519
- color: tokens.colorNeutralForeground1,
13520
- fontSize: tokens.fontSizeBase400,
13521
- fontFamily: tokens.fontFamilyBase
13522
- },
13523
- onKeyDown: (e) => {
13524
- if ([
13525
- "e",
13526
- "E",
13527
- "+",
13528
- "-",
13529
- ".",
13530
- ","
13531
- ].includes(e.key)) {
13532
- e.preventDefault();
13533
- }
13534
- },
13535
- onPaste: (e) => {
13536
- const paste = e.clipboardData.getData(
13537
- "text"
13538
- );
13539
- if (!/^\d+$/.test(paste)) {
13540
- e.preventDefault();
13541
- }
13542
- },
13543
- onWheel: (e) => e.target.blur(),
13544
- onChange: (e) => {
13545
- const newVal = Number(
13546
- e.target.value
13547
- );
13548
- field.onChange(e);
13549
- onUpdateCargoQuantity(
13550
- owner.id,
13551
- cargo.id,
13552
- newVal
13553
- );
13554
- }
13555
- }
13556
- ),
13557
- rules: {
13558
- required: true,
13559
- validate: (val) => Number(val) > 0
13560
- }
13561
- }
13562
- ) }),
13563
- /* @__PURE__ */ jsx(
13564
- Button,
13565
- {
13566
- appearance: "transparent",
13567
- disabled,
13568
- icon: /* @__PURE__ */ jsx(
13569
- Icon,
13570
- {
13571
- icon: "fluent:add-circle-24-regular",
13572
- style: {
13573
- fontSize: "24px",
13574
- color: tokens.colorBrandStroke1
13575
- }
13576
- }
13577
- ),
13578
- "aria-label": mergedLabels.incrementQuantityAriaLabel,
13579
- size: "small",
13580
- onClick: () => {
13581
- const currentVal = getValues(
13582
- `owners.${index}.cargo.${cargoIndex}.quantity`
13583
- ) || 0;
13584
- const currentQty = Number(currentVal);
13585
- const newVal = currentQty + 1;
13586
- setValue(
13587
- `owners.${index}.cargo.${cargoIndex}.quantity`,
13588
- newVal
13589
- );
13590
- onUpdateCargoQuantity(
13591
- owner.id,
13592
- cargo.id,
13593
- newVal
13594
- );
13595
- },
13596
- style: {
13597
- minWidth: "32px",
13598
- padding: "0"
13599
- }
13600
- }
13601
- )
13602
- ]
13603
- }
13604
- ),
13605
- /* @__PURE__ */ jsx(
13606
- "div",
13607
- {
13608
- style: {
13609
- flex: 1,
13610
- textAlign: "left",
13611
- color: tokens.colorNeutralForeground1,
13612
- fontSize: tokens.fontSizeBase300,
13613
- paddingRight: "8px"
13614
- },
13615
- children: (() => {
13616
- const type2 = watch(
13617
- `owners.${index}.cargo.${cargoIndex}.cargoType`
13618
- );
13619
- const selectedLoadType3 = loadTypes.find(
13620
- (loadType) => loadType.id.toString() === type2
13621
- );
13622
- return selectedLoadType3?.unit?.name;
13623
- })()
13624
- }
13625
- )
13626
- ]
13627
- }
13628
- )
13629
- ] }),
13630
- /* @__PURE__ */ jsxs(Col, { md: 3, children: [
13631
- /* @__PURE__ */ jsx("div", { style: { flex: 0.5 } }),
13632
- /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.priceLabel }),
13633
- /* @__PURE__ */ jsx(
13634
- Body2,
13635
- {
13636
- style: { marginTop: "0.5rem" },
13637
- children: (() => {
13638
- return new Intl.NumberFormat(
13639
- "id-ID",
13640
- {
13641
- style: "currency",
13642
- currency: "IDR",
13643
- minimumFractionDigits: 0
13644
- }
13645
- ).format(
13646
- Number(
13647
- getValues(
13648
- `owners.${index}.cargo.${cargoIndex}.quantity`
13649
- ) || 0
13650
- ) * (selectedLoadType2?.price || 0)
13651
- );
13652
- })()
13653
- }
13654
- )
13655
- ] })
13656
- ] });
13657
- })()
13406
+ ] })
13658
13407
  ] }),
13659
13408
  /* @__PURE__ */ jsxs(Row, { children: [
13660
13409
  /* @__PURE__ */ jsxs(Col, { md: 6, children: [
@@ -13758,7 +13507,240 @@ var CardVehicleOwnerForm = ({
13758
13507
  },
13759
13508
  children: mergedLabels.deleteCargoButton
13760
13509
  }
13761
- ) }) })
13510
+ ) }) }),
13511
+ (() => {
13512
+ const type = watch(
13513
+ `owners.${index}.cargo.${cargoIndex}.cargoType`
13514
+ );
13515
+ const _selectedLoadType = loadTypes.find(
13516
+ (loadType) => loadType.id.toString() === type
13517
+ );
13518
+ if (!_selectedLoadType) return null;
13519
+ return /* @__PURE__ */ jsxs(Row, { children: [
13520
+ /* @__PURE__ */ jsxs(Col, { md: 12, children: [
13521
+ /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.cargoQuantityLabel }),
13522
+ /* @__PURE__ */ jsxs(
13523
+ "div",
13524
+ {
13525
+ style: {
13526
+ display: "flex",
13527
+ alignItems: "center",
13528
+ border: `1px solid ${tokens.colorNeutralStroke1}`,
13529
+ borderRadius: tokens.borderRadiusMedium,
13530
+ height: "40px",
13531
+ padding: "0 12px",
13532
+ backgroundColor: tokens.colorNeutralBackground1
13533
+ },
13534
+ children: [
13535
+ /* @__PURE__ */ jsx("div", { style: { flex: 0.5 } }),
13536
+ /* @__PURE__ */ jsxs(
13537
+ "div",
13538
+ {
13539
+ style: {
13540
+ display: "flex",
13541
+ alignItems: "center",
13542
+ gap: "12px"
13543
+ },
13544
+ children: [
13545
+ /* @__PURE__ */ jsx(
13546
+ Button,
13547
+ {
13548
+ appearance: "transparent",
13549
+ disabled,
13550
+ icon: /* @__PURE__ */ jsx(
13551
+ Icon,
13552
+ {
13553
+ icon: "fluent:subtract-circle-24-regular",
13554
+ style: {
13555
+ fontSize: "24px",
13556
+ color: tokens.colorNeutralForeground4
13557
+ }
13558
+ }
13559
+ ),
13560
+ "aria-label": mergedLabels.decrementQuantityAriaLabel,
13561
+ size: "small",
13562
+ onClick: () => {
13563
+ const currentVal = getValues(
13564
+ `owners.${index}.cargo.${cargoIndex}.quantity`
13565
+ ) || 0;
13566
+ const currentQty = Number(currentVal);
13567
+ if (currentQty > 1) {
13568
+ const newVal = currentQty - 1;
13569
+ setValue(
13570
+ `owners.${index}.cargo.${cargoIndex}.quantity`,
13571
+ newVal
13572
+ );
13573
+ onUpdateCargoQuantity(
13574
+ owner.id,
13575
+ cargo.id,
13576
+ newVal
13577
+ );
13578
+ }
13579
+ },
13580
+ style: {
13581
+ minWidth: "32px",
13582
+ padding: "0"
13583
+ }
13584
+ }
13585
+ ),
13586
+ /* @__PURE__ */ jsx("div", { style: { width: "40px" }, children: /* @__PURE__ */ jsx(
13587
+ Controller,
13588
+ {
13589
+ name: `owners.${index}.cargo.${cargoIndex}.quantity`,
13590
+ control,
13591
+ disabled,
13592
+ render: ({ field }) => /* @__PURE__ */ jsx(
13593
+ "input",
13594
+ {
13595
+ ...field,
13596
+ min: 1,
13597
+ step: "1",
13598
+ type: "number",
13599
+ style: {
13600
+ border: "none",
13601
+ width: "100%",
13602
+ textAlign: "center",
13603
+ outline: "none",
13604
+ backgroundColor: "transparent",
13605
+ color: tokens.colorNeutralForeground1,
13606
+ fontSize: tokens.fontSizeBase400,
13607
+ fontFamily: tokens.fontFamilyBase
13608
+ },
13609
+ onKeyDown: (e) => {
13610
+ if ([
13611
+ "e",
13612
+ "E",
13613
+ "+",
13614
+ "-",
13615
+ ".",
13616
+ ","
13617
+ ].includes(e.key)) {
13618
+ e.preventDefault();
13619
+ }
13620
+ },
13621
+ onPaste: (e) => {
13622
+ const paste = e.clipboardData.getData(
13623
+ "text"
13624
+ );
13625
+ if (!/^\d+$/.test(paste)) {
13626
+ e.preventDefault();
13627
+ }
13628
+ },
13629
+ onWheel: (e) => e.target.blur(),
13630
+ onChange: (e) => {
13631
+ const newVal = Number(
13632
+ e.target.value
13633
+ );
13634
+ field.onChange(e);
13635
+ onUpdateCargoQuantity(
13636
+ owner.id,
13637
+ cargo.id,
13638
+ newVal
13639
+ );
13640
+ }
13641
+ }
13642
+ ),
13643
+ rules: {
13644
+ required: true,
13645
+ validate: (val) => Number(val) > 0
13646
+ }
13647
+ }
13648
+ ) }),
13649
+ /* @__PURE__ */ jsx(
13650
+ Button,
13651
+ {
13652
+ appearance: "transparent",
13653
+ disabled,
13654
+ icon: /* @__PURE__ */ jsx(
13655
+ Icon,
13656
+ {
13657
+ icon: "fluent:add-circle-24-regular",
13658
+ style: {
13659
+ fontSize: "24px",
13660
+ color: tokens.colorBrandStroke1
13661
+ }
13662
+ }
13663
+ ),
13664
+ "aria-label": mergedLabels.incrementQuantityAriaLabel,
13665
+ size: "small",
13666
+ onClick: () => {
13667
+ const currentVal = getValues(
13668
+ `owners.${index}.cargo.${cargoIndex}.quantity`
13669
+ ) || 0;
13670
+ const currentQty = Number(currentVal);
13671
+ const newVal = currentQty + 1;
13672
+ setValue(
13673
+ `owners.${index}.cargo.${cargoIndex}.quantity`,
13674
+ newVal
13675
+ );
13676
+ onUpdateCargoQuantity(
13677
+ owner.id,
13678
+ cargo.id,
13679
+ newVal
13680
+ );
13681
+ },
13682
+ style: {
13683
+ minWidth: "32px",
13684
+ padding: "0"
13685
+ }
13686
+ }
13687
+ )
13688
+ ]
13689
+ }
13690
+ ),
13691
+ /* @__PURE__ */ jsx(
13692
+ "div",
13693
+ {
13694
+ style: {
13695
+ flex: 1,
13696
+ textAlign: "left",
13697
+ color: tokens.colorNeutralForeground1,
13698
+ fontSize: tokens.fontSizeBase300,
13699
+ paddingRight: "8px"
13700
+ },
13701
+ children: (() => {
13702
+ const type2 = watch(
13703
+ `owners.${index}.cargo.${cargoIndex}.cargoType`
13704
+ );
13705
+ const selectedLoadType2 = loadTypes.find(
13706
+ (loadType) => loadType.id.toString() === type2
13707
+ );
13708
+ return selectedLoadType2?.unit?.name;
13709
+ })()
13710
+ }
13711
+ )
13712
+ ]
13713
+ }
13714
+ )
13715
+ ] }),
13716
+ /* @__PURE__ */ jsxs(Col, { md: 12, children: [
13717
+ /* @__PURE__ */ jsx("div", { style: { flex: 0.5 } }),
13718
+ /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.priceLabel }),
13719
+ /* @__PURE__ */ jsx(
13720
+ Body2,
13721
+ {
13722
+ style: { marginTop: "0.5rem" },
13723
+ children: (() => {
13724
+ return new Intl.NumberFormat(
13725
+ "id-ID",
13726
+ {
13727
+ style: "currency",
13728
+ currency: "IDR",
13729
+ minimumFractionDigits: 0
13730
+ }
13731
+ ).format(
13732
+ Number(
13733
+ getValues(
13734
+ `owners.${index}.cargo.${cargoIndex}.quantity`
13735
+ ) || 0
13736
+ ) * (_selectedLoadType?.price || 0)
13737
+ );
13738
+ })()
13739
+ }
13740
+ )
13741
+ ] })
13742
+ ] });
13743
+ })()
13762
13744
  ] }) })
13763
13745
  ]
13764
13746
  },