@asdp/ferryui 0.1.22-dev.9582 → 0.1.22-dev.9610
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 +23 -8
- package/dist/index.d.ts +23 -8
- package/dist/index.js +291 -205
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +291 -205
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -469,7 +469,8 @@ var MANIFEST_ENTITY = {
|
|
|
469
469
|
};
|
|
470
470
|
var HARDCODED_ID = {
|
|
471
471
|
FAQ_ID_PEMESANAN_TIKET: 1,
|
|
472
|
-
COMPANY_ID_LAINNYA: "999999"
|
|
472
|
+
COMPANY_ID_LAINNYA: "999999",
|
|
473
|
+
LOAD_TYPE_ID_LAINNYA: 87
|
|
473
474
|
};
|
|
474
475
|
var useStyles2 = reactComponents.makeStyles({
|
|
475
476
|
carousel: {},
|
|
@@ -8926,10 +8927,11 @@ var DEFAULT_LABELS17 = {
|
|
|
8926
8927
|
return `Mulai dari IDR ${formatPrice(min)} - ${formatPrice(max)}`;
|
|
8927
8928
|
},
|
|
8928
8929
|
durationLabel: "Durasi perjalanan",
|
|
8929
|
-
durationRangeText: (min, max) => `Perjalanan ${min} - ${max}
|
|
8930
|
+
durationRangeText: (min, max) => `Perjalanan ${min} - ${max} menit`,
|
|
8930
8931
|
resetButton: "Reset",
|
|
8931
8932
|
applyButton: "Terapkan",
|
|
8932
8933
|
hourUnit: "jam",
|
|
8934
|
+
minuteUnit: "menit",
|
|
8933
8935
|
currencySymbol: "IDR",
|
|
8934
8936
|
closeAriaLabel: "Tutup"
|
|
8935
8937
|
},
|
|
@@ -8944,10 +8946,11 @@ var DEFAULT_LABELS17 = {
|
|
|
8944
8946
|
return `From IDR ${formatPrice(min)} - ${formatPrice(max)}`;
|
|
8945
8947
|
},
|
|
8946
8948
|
durationLabel: "Travel duration",
|
|
8947
|
-
durationRangeText: (min, max) => `${min} - ${max}
|
|
8949
|
+
durationRangeText: (min, max) => `${min} - ${max} minutes trip`,
|
|
8948
8950
|
resetButton: "Reset",
|
|
8949
8951
|
applyButton: "Apply",
|
|
8950
8952
|
hourUnit: "hours",
|
|
8953
|
+
minuteUnit: "minutes",
|
|
8951
8954
|
currencySymbol: "IDR",
|
|
8952
8955
|
closeAriaLabel: "Close"
|
|
8953
8956
|
}
|
|
@@ -8968,16 +8971,16 @@ var DEFAULT_TIME_SLOTS = [
|
|
|
8968
8971
|
{ value: "18:00 - 24:00", label: "18:00 - 24:00" }
|
|
8969
8972
|
];
|
|
8970
8973
|
var DEFAULT_PRICE_RANGE = {
|
|
8971
|
-
min:
|
|
8972
|
-
max:
|
|
8974
|
+
min: 0,
|
|
8975
|
+
max: 0
|
|
8973
8976
|
};
|
|
8974
8977
|
var DEFAULT_DURATION_RANGE = {
|
|
8975
8978
|
min: 0,
|
|
8976
|
-
max:
|
|
8979
|
+
max: 0
|
|
8977
8980
|
};
|
|
8978
8981
|
var useStyles18 = reactComponents.makeStyles({
|
|
8979
8982
|
dialogSurface: {
|
|
8980
|
-
maxWidth: "
|
|
8983
|
+
maxWidth: "650px",
|
|
8981
8984
|
width: "100%"
|
|
8982
8985
|
},
|
|
8983
8986
|
content: {
|
|
@@ -9059,6 +9062,16 @@ var useStyles18 = reactComponents.makeStyles({
|
|
|
9059
9062
|
backgroundColor: reactComponents.tokens.colorPaletteRedBackground1,
|
|
9060
9063
|
...reactComponents.shorthands.borderColor(reactComponents.tokens.colorPaletteRedForeground1)
|
|
9061
9064
|
}
|
|
9065
|
+
},
|
|
9066
|
+
skeletonGrid: {
|
|
9067
|
+
display: "grid",
|
|
9068
|
+
gridTemplateColumns: "repeat(2, 1fr)",
|
|
9069
|
+
gap: "0.5rem"
|
|
9070
|
+
},
|
|
9071
|
+
skeletonCheckboxRow: {
|
|
9072
|
+
display: "flex",
|
|
9073
|
+
gap: reactComponents.tokens.spacingHorizontalS,
|
|
9074
|
+
alignItems: "center"
|
|
9062
9075
|
}
|
|
9063
9076
|
});
|
|
9064
9077
|
var ModalFilterTicket = ({
|
|
@@ -9078,12 +9091,14 @@ var ModalFilterTicket = ({
|
|
|
9078
9091
|
onReset,
|
|
9079
9092
|
onApply,
|
|
9080
9093
|
labels,
|
|
9081
|
-
serviceTypes =
|
|
9082
|
-
timeSlots =
|
|
9083
|
-
minPrice =
|
|
9084
|
-
maxPrice =
|
|
9085
|
-
minDuration =
|
|
9086
|
-
maxDuration =
|
|
9094
|
+
serviceTypes = [],
|
|
9095
|
+
timeSlots = [],
|
|
9096
|
+
minPrice = 0,
|
|
9097
|
+
maxPrice = 0,
|
|
9098
|
+
minDuration = 0,
|
|
9099
|
+
maxDuration = 0,
|
|
9100
|
+
durationStep = 1,
|
|
9101
|
+
isLoading = false
|
|
9087
9102
|
}) => {
|
|
9088
9103
|
const styles = useStyles18();
|
|
9089
9104
|
const mergedLabels = { ...DEFAULT_LABELS17[language], ...labels };
|
|
@@ -9125,8 +9140,19 @@ var ModalFilterTicket = ({
|
|
|
9125
9140
|
price
|
|
9126
9141
|
);
|
|
9127
9142
|
};
|
|
9143
|
+
const hasPriceRange = minPrice > 0 || maxPrice > 0;
|
|
9144
|
+
const hasDurationRange = minDuration > 0 || maxDuration > 0;
|
|
9145
|
+
const safePriceValues = hasPriceRange ? [
|
|
9146
|
+
Math.min(Math.max(priceRange[0], minPrice), maxPrice),
|
|
9147
|
+
Math.min(Math.max(priceRange[1], minPrice), maxPrice)
|
|
9148
|
+
] : [minPrice, maxPrice];
|
|
9149
|
+
const safeDurationValues = hasDurationRange ? [
|
|
9150
|
+
Math.min(Math.max(durationRange[0], minDuration), maxDuration),
|
|
9151
|
+
Math.min(Math.max(durationRange[1], minDuration), maxDuration)
|
|
9152
|
+
] : [minDuration, maxDuration];
|
|
9128
9153
|
const renderPriceTrack = React.useCallback(
|
|
9129
9154
|
({ props, children }) => {
|
|
9155
|
+
if (!hasPriceRange) return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, ref: props.ref, children });
|
|
9130
9156
|
const [value1, value2] = priceRange;
|
|
9131
9157
|
const percent1 = (value1 - minPrice) / (maxPrice - minPrice) * 100;
|
|
9132
9158
|
const percent2 = (value2 - minPrice) / (maxPrice - minPrice) * 100;
|
|
@@ -9162,10 +9188,11 @@ var ModalFilterTicket = ({
|
|
|
9162
9188
|
}
|
|
9163
9189
|
);
|
|
9164
9190
|
},
|
|
9165
|
-
[priceRange, minPrice, maxPrice]
|
|
9191
|
+
[priceRange, minPrice, maxPrice, hasPriceRange]
|
|
9166
9192
|
);
|
|
9167
9193
|
const renderDurationTrack = React.useCallback(
|
|
9168
9194
|
({ props, children }) => {
|
|
9195
|
+
if (!hasDurationRange) return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, ref: props.ref, children });
|
|
9169
9196
|
const [value1, value2] = durationRange;
|
|
9170
9197
|
const percent1 = (value1 - minDuration) / (maxDuration - minDuration) * 100;
|
|
9171
9198
|
const percent2 = (value2 - minDuration) / (maxDuration - minDuration) * 100;
|
|
@@ -9201,7 +9228,7 @@ var ModalFilterTicket = ({
|
|
|
9201
9228
|
}
|
|
9202
9229
|
);
|
|
9203
9230
|
},
|
|
9204
|
-
[durationRange, minDuration, maxDuration]
|
|
9231
|
+
[durationRange, minDuration, maxDuration, hasDurationRange]
|
|
9205
9232
|
);
|
|
9206
9233
|
const renderThumb = ({ props }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
9207
9234
|
"div",
|
|
@@ -9221,6 +9248,30 @@ var ModalFilterTicket = ({
|
|
|
9221
9248
|
}
|
|
9222
9249
|
}
|
|
9223
9250
|
);
|
|
9251
|
+
const renderServiceTypesSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
|
|
9252
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "120px", height: "20px" } }) }),
|
|
9253
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.skeletonGrid, children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100%", height: "40px", borderRadius: "8px" } }) }, `svc-skel-${i}`)) })
|
|
9254
|
+
] });
|
|
9255
|
+
const renderTimeSlotsSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
|
|
9256
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100px", height: "20px" } }) }),
|
|
9257
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 6, sm: 6, md: 6, lg: 3, xl: 3, xxl: 3, xxxl: 3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.skeletonCheckboxRow, children: [
|
|
9258
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "16px", height: "16px", borderRadius: "4px" } }) }),
|
|
9259
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "16px" } }) })
|
|
9260
|
+
] }) }, `time-skel-${i}`)) })
|
|
9261
|
+
] });
|
|
9262
|
+
const renderRangeSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.containerRange, children: [
|
|
9263
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.spaceText, children: [
|
|
9264
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "20px" } }) }),
|
|
9265
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "200px", height: "16px" } }) })
|
|
9266
|
+
] }),
|
|
9267
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sliderContainer, children: [
|
|
9268
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100%", height: "4px", borderRadius: "2px" } }) }),
|
|
9269
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sliderValues, children: [
|
|
9270
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60px", height: "14px" } }) }),
|
|
9271
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60px", height: "14px" } }) })
|
|
9272
|
+
] })
|
|
9273
|
+
] })
|
|
9274
|
+
] });
|
|
9224
9275
|
return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Dialog, { open, onOpenChange: (_, data) => onOpenChange(data.open), children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
|
|
9225
9276
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
9226
9277
|
reactComponents.DialogTitle,
|
|
@@ -9240,7 +9291,7 @@ var ModalFilterTicket = ({
|
|
|
9240
9291
|
),
|
|
9241
9292
|
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { className: styles.content, children: [
|
|
9242
9293
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
|
|
9243
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
|
|
9294
|
+
isLoading ? renderServiceTypesSkeleton() : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
|
|
9244
9295
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.serviceTypeLabel }),
|
|
9245
9296
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.buttonGrid, children: serviceTypes.map((service) => {
|
|
9246
9297
|
const isSelected = selectedServiceTypes.includes(
|
|
@@ -9261,7 +9312,7 @@ var ModalFilterTicket = ({
|
|
|
9261
9312
|
}) })
|
|
9262
9313
|
] }),
|
|
9263
9314
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
|
|
9264
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
|
|
9315
|
+
isLoading ? renderTimeSlotsSkeleton() : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
|
|
9265
9316
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.departureTimeLabel }),
|
|
9266
9317
|
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { children: timeSlots.map((slot) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
9267
9318
|
reactGridSystem.Col,
|
|
@@ -9289,7 +9340,7 @@ var ModalFilterTicket = ({
|
|
|
9289
9340
|
)) })
|
|
9290
9341
|
] }),
|
|
9291
9342
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
|
|
9292
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
|
|
9343
|
+
isLoading ? renderTimeSlotsSkeleton() : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
|
|
9293
9344
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.arrivalTimeLabel }),
|
|
9294
9345
|
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { children: timeSlots.map((slot) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
9295
9346
|
reactGridSystem.Col,
|
|
@@ -9317,18 +9368,18 @@ var ModalFilterTicket = ({
|
|
|
9317
9368
|
)) })
|
|
9318
9369
|
] }),
|
|
9319
9370
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
|
|
9320
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.containerRange, children: [
|
|
9371
|
+
isLoading ? renderRangeSkeleton() : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.containerRange, children: [
|
|
9321
9372
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.spaceText, children: [
|
|
9322
9373
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: mergedLabels.priceLabel }),
|
|
9323
9374
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.priceRangeText(priceRange[0], priceRange[1]) })
|
|
9324
9375
|
] }),
|
|
9325
9376
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sliderContainer, children: [
|
|
9326
|
-
rangeReady && /* @__PURE__ */ jsxRuntime.jsx(
|
|
9377
|
+
rangeReady && hasPriceRange && /* @__PURE__ */ jsxRuntime.jsx(
|
|
9327
9378
|
reactRange.Range,
|
|
9328
9379
|
{
|
|
9329
9380
|
min: minPrice,
|
|
9330
9381
|
max: maxPrice,
|
|
9331
|
-
values:
|
|
9382
|
+
values: safePriceValues,
|
|
9332
9383
|
onChange: (values) => onPriceRangeChange(values),
|
|
9333
9384
|
renderTrack: renderPriceTrack,
|
|
9334
9385
|
renderThumb
|
|
@@ -9342,7 +9393,7 @@ var ModalFilterTicket = ({
|
|
|
9342
9393
|
] })
|
|
9343
9394
|
] }),
|
|
9344
9395
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
|
|
9345
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.containerRange, children: [
|
|
9396
|
+
isLoading ? renderRangeSkeleton() : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.containerRange, children: [
|
|
9346
9397
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.spaceText, children: [
|
|
9347
9398
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: mergedLabels.durationLabel }),
|
|
9348
9399
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.durationRangeText(
|
|
@@ -9351,13 +9402,13 @@ var ModalFilterTicket = ({
|
|
|
9351
9402
|
) })
|
|
9352
9403
|
] }),
|
|
9353
9404
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sliderContainer, children: [
|
|
9354
|
-
rangeReady && /* @__PURE__ */ jsxRuntime.jsx(
|
|
9405
|
+
rangeReady && hasDurationRange && /* @__PURE__ */ jsxRuntime.jsx(
|
|
9355
9406
|
reactRange.Range,
|
|
9356
9407
|
{
|
|
9357
|
-
step:
|
|
9408
|
+
step: durationStep,
|
|
9358
9409
|
min: minDuration,
|
|
9359
9410
|
max: maxDuration,
|
|
9360
|
-
values:
|
|
9411
|
+
values: safeDurationValues,
|
|
9361
9412
|
onChange: (values) => onDurationRangeChange(values),
|
|
9362
9413
|
renderTrack: renderDurationTrack,
|
|
9363
9414
|
renderThumb
|
|
@@ -9368,12 +9419,12 @@ var ModalFilterTicket = ({
|
|
|
9368
9419
|
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
9369
9420
|
minDuration,
|
|
9370
9421
|
" ",
|
|
9371
|
-
mergedLabels.
|
|
9422
|
+
mergedLabels.minuteUnit
|
|
9372
9423
|
] }),
|
|
9373
9424
|
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
9374
9425
|
maxDuration,
|
|
9375
9426
|
" ",
|
|
9376
|
-
mergedLabels.
|
|
9427
|
+
mergedLabels.minuteUnit
|
|
9377
9428
|
] })
|
|
9378
9429
|
] })
|
|
9379
9430
|
] })
|
|
@@ -11873,7 +11924,7 @@ var CardPassengerList = ({
|
|
|
11873
11924
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11874
11925
|
react.Icon,
|
|
11875
11926
|
{
|
|
11876
|
-
icon: "fluent:chevron-right-24-regular",
|
|
11927
|
+
icon: passenger.name && passenger.serviceName ? "fluent:edit-24-regular" : "fluent:chevron-right-24-regular",
|
|
11877
11928
|
width: 20,
|
|
11878
11929
|
height: 20
|
|
11879
11930
|
}
|
|
@@ -12776,7 +12827,9 @@ var CardVehicleOwnerForm = ({
|
|
|
12776
12827
|
InputDynamic_default,
|
|
12777
12828
|
{
|
|
12778
12829
|
control,
|
|
12779
|
-
disabled
|
|
12830
|
+
disabled: disabled || (getValues(
|
|
12831
|
+
`owners.${index}.cargo.${cargoIndex}.commodity`
|
|
12832
|
+
) || "") === "",
|
|
12780
12833
|
name: `owners.${index}.cargo.${cargoIndex}.cargoType`,
|
|
12781
12834
|
onChange: (val) => {
|
|
12782
12835
|
const name = `owners.${index}.cargo.${cargoIndex}.cargoType`;
|
|
@@ -12817,57 +12870,158 @@ var CardVehicleOwnerForm = ({
|
|
|
12817
12870
|
(loadType) => loadType.id === type
|
|
12818
12871
|
);
|
|
12819
12872
|
if (!selectedLoadType) {
|
|
12820
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
12873
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
|
|
12874
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.priceLabel }),
|
|
12875
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
12876
|
+
reactComponents.Body2,
|
|
12877
|
+
{
|
|
12878
|
+
style: { marginTop: "0.5rem" },
|
|
12879
|
+
children: (() => {
|
|
12880
|
+
return new Intl.NumberFormat(
|
|
12881
|
+
"id-ID",
|
|
12882
|
+
{
|
|
12883
|
+
style: "currency",
|
|
12884
|
+
currency: "IDR",
|
|
12885
|
+
minimumFractionDigits: 0
|
|
12886
|
+
}
|
|
12887
|
+
).format(0);
|
|
12888
|
+
})()
|
|
12889
|
+
}
|
|
12890
|
+
)
|
|
12891
|
+
] });
|
|
12821
12892
|
}
|
|
12822
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
12823
|
-
/* @__PURE__ */ jsxRuntime.
|
|
12824
|
-
|
|
12825
|
-
|
|
12826
|
-
|
|
12827
|
-
|
|
12828
|
-
|
|
12829
|
-
|
|
12830
|
-
|
|
12831
|
-
|
|
12832
|
-
|
|
12833
|
-
|
|
12834
|
-
|
|
12835
|
-
|
|
12836
|
-
|
|
12837
|
-
|
|
12838
|
-
|
|
12839
|
-
|
|
12840
|
-
|
|
12841
|
-
|
|
12842
|
-
|
|
12843
|
-
|
|
12844
|
-
|
|
12845
|
-
|
|
12846
|
-
|
|
12847
|
-
|
|
12848
|
-
|
|
12849
|
-
|
|
12850
|
-
|
|
12851
|
-
|
|
12852
|
-
|
|
12853
|
-
|
|
12854
|
-
|
|
12855
|
-
|
|
12856
|
-
|
|
12857
|
-
|
|
12858
|
-
|
|
12893
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
12894
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
|
|
12895
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.cargoQuantityLabel }),
|
|
12896
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
12897
|
+
"div",
|
|
12898
|
+
{
|
|
12899
|
+
style: {
|
|
12900
|
+
display: "flex",
|
|
12901
|
+
alignItems: "center",
|
|
12902
|
+
border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
|
|
12903
|
+
borderRadius: reactComponents.tokens.borderRadiusMedium,
|
|
12904
|
+
height: "40px",
|
|
12905
|
+
padding: "0 12px",
|
|
12906
|
+
backgroundColor: reactComponents.tokens.colorNeutralBackground1
|
|
12907
|
+
},
|
|
12908
|
+
children: [
|
|
12909
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 0.5 } }),
|
|
12910
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
12911
|
+
"div",
|
|
12912
|
+
{
|
|
12913
|
+
style: {
|
|
12914
|
+
display: "flex",
|
|
12915
|
+
alignItems: "center",
|
|
12916
|
+
gap: "12px"
|
|
12917
|
+
},
|
|
12918
|
+
children: [
|
|
12919
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
12920
|
+
reactComponents.Button,
|
|
12921
|
+
{
|
|
12922
|
+
appearance: "transparent",
|
|
12923
|
+
disabled,
|
|
12924
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(
|
|
12925
|
+
react.Icon,
|
|
12926
|
+
{
|
|
12927
|
+
icon: "fluent:subtract-circle-24-regular",
|
|
12928
|
+
style: {
|
|
12929
|
+
fontSize: "24px",
|
|
12930
|
+
color: reactComponents.tokens.colorNeutralForeground4
|
|
12931
|
+
}
|
|
12859
12932
|
}
|
|
12933
|
+
),
|
|
12934
|
+
"aria-label": mergedLabels.decrementQuantityAriaLabel,
|
|
12935
|
+
size: "small",
|
|
12936
|
+
onClick: () => {
|
|
12937
|
+
const currentVal = getValues(
|
|
12938
|
+
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
12939
|
+
) || 0;
|
|
12940
|
+
const currentQty = Number(currentVal);
|
|
12941
|
+
if (currentQty > 0) {
|
|
12942
|
+
const newVal = currentQty - 1;
|
|
12943
|
+
setValue(
|
|
12944
|
+
`owners.${index}.cargo.${cargoIndex}.quantity`,
|
|
12945
|
+
newVal
|
|
12946
|
+
);
|
|
12947
|
+
onUpdateCargoQuantity(
|
|
12948
|
+
owner.id,
|
|
12949
|
+
cargo.id,
|
|
12950
|
+
newVal
|
|
12951
|
+
);
|
|
12952
|
+
}
|
|
12953
|
+
},
|
|
12954
|
+
style: {
|
|
12955
|
+
minWidth: "32px",
|
|
12956
|
+
padding: "0"
|
|
12860
12957
|
}
|
|
12861
|
-
|
|
12862
|
-
|
|
12863
|
-
|
|
12864
|
-
|
|
12865
|
-
|
|
12866
|
-
|
|
12867
|
-
|
|
12868
|
-
|
|
12869
|
-
|
|
12870
|
-
|
|
12958
|
+
}
|
|
12959
|
+
),
|
|
12960
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "40px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
12961
|
+
reactHookForm.Controller,
|
|
12962
|
+
{
|
|
12963
|
+
name: `owners.${index}.cargo.${cargoIndex}.quantity`,
|
|
12964
|
+
control,
|
|
12965
|
+
disabled,
|
|
12966
|
+
render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
12967
|
+
"input",
|
|
12968
|
+
{
|
|
12969
|
+
...field,
|
|
12970
|
+
min: 1,
|
|
12971
|
+
type: "number",
|
|
12972
|
+
style: {
|
|
12973
|
+
border: "none",
|
|
12974
|
+
width: "100%",
|
|
12975
|
+
textAlign: "center",
|
|
12976
|
+
outline: "none",
|
|
12977
|
+
backgroundColor: "transparent",
|
|
12978
|
+
color: reactComponents.tokens.colorNeutralForeground1,
|
|
12979
|
+
fontSize: reactComponents.tokens.fontSizeBase400,
|
|
12980
|
+
fontFamily: reactComponents.tokens.fontFamilyBase
|
|
12981
|
+
},
|
|
12982
|
+
onWheel: (e) => e.target.blur(),
|
|
12983
|
+
onChange: (e) => {
|
|
12984
|
+
const newVal = Number(
|
|
12985
|
+
e.target.value
|
|
12986
|
+
);
|
|
12987
|
+
field.onChange(e);
|
|
12988
|
+
onUpdateCargoQuantity(
|
|
12989
|
+
owner.id,
|
|
12990
|
+
cargo.id,
|
|
12991
|
+
newVal
|
|
12992
|
+
);
|
|
12993
|
+
}
|
|
12994
|
+
}
|
|
12995
|
+
),
|
|
12996
|
+
rules: {
|
|
12997
|
+
required: true,
|
|
12998
|
+
min: 1
|
|
12999
|
+
}
|
|
13000
|
+
}
|
|
13001
|
+
) }),
|
|
13002
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13003
|
+
reactComponents.Button,
|
|
13004
|
+
{
|
|
13005
|
+
appearance: "transparent",
|
|
13006
|
+
disabled,
|
|
13007
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13008
|
+
react.Icon,
|
|
13009
|
+
{
|
|
13010
|
+
icon: "fluent:add-circle-24-regular",
|
|
13011
|
+
style: {
|
|
13012
|
+
fontSize: "24px",
|
|
13013
|
+
color: reactComponents.tokens.colorBrandStroke1
|
|
13014
|
+
}
|
|
13015
|
+
}
|
|
13016
|
+
),
|
|
13017
|
+
"aria-label": mergedLabels.incrementQuantityAriaLabel,
|
|
13018
|
+
size: "small",
|
|
13019
|
+
onClick: () => {
|
|
13020
|
+
const currentVal = getValues(
|
|
13021
|
+
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
13022
|
+
) || 0;
|
|
13023
|
+
const currentQty = Number(currentVal);
|
|
13024
|
+
const newVal = currentQty + 1;
|
|
12871
13025
|
setValue(
|
|
12872
13026
|
`owners.${index}.cargo.${cargoIndex}.quantity`,
|
|
12873
13027
|
newVal
|
|
@@ -12877,137 +13031,69 @@ var CardVehicleOwnerForm = ({
|
|
|
12877
13031
|
cargo.id,
|
|
12878
13032
|
newVal
|
|
12879
13033
|
);
|
|
13034
|
+
},
|
|
13035
|
+
style: {
|
|
13036
|
+
minWidth: "32px",
|
|
13037
|
+
padding: "0"
|
|
12880
13038
|
}
|
|
12881
|
-
},
|
|
12882
|
-
style: {
|
|
12883
|
-
minWidth: "32px",
|
|
12884
|
-
padding: "0"
|
|
12885
13039
|
}
|
|
12886
|
-
|
|
12887
|
-
|
|
12888
|
-
|
|
12889
|
-
|
|
12890
|
-
|
|
12891
|
-
|
|
12892
|
-
|
|
12893
|
-
|
|
12894
|
-
|
|
12895
|
-
|
|
12896
|
-
|
|
12897
|
-
|
|
12898
|
-
|
|
12899
|
-
|
|
12900
|
-
|
|
12901
|
-
|
|
12902
|
-
|
|
12903
|
-
|
|
12904
|
-
|
|
12905
|
-
|
|
12906
|
-
|
|
12907
|
-
|
|
12908
|
-
|
|
12909
|
-
|
|
12910
|
-
|
|
12911
|
-
|
|
12912
|
-
|
|
12913
|
-
field.onChange(e);
|
|
12914
|
-
onUpdateCargoQuantity(
|
|
12915
|
-
owner.id,
|
|
12916
|
-
cargo.id,
|
|
12917
|
-
newVal
|
|
12918
|
-
);
|
|
12919
|
-
}
|
|
12920
|
-
}
|
|
12921
|
-
)
|
|
12922
|
-
}
|
|
12923
|
-
) }),
|
|
12924
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
12925
|
-
reactComponents.Button,
|
|
12926
|
-
{
|
|
12927
|
-
appearance: "transparent",
|
|
12928
|
-
disabled,
|
|
12929
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(
|
|
12930
|
-
react.Icon,
|
|
12931
|
-
{
|
|
12932
|
-
icon: "fluent:add-circle-24-regular",
|
|
12933
|
-
style: {
|
|
12934
|
-
fontSize: "24px",
|
|
12935
|
-
color: reactComponents.tokens.colorBrandStroke1
|
|
12936
|
-
}
|
|
12937
|
-
}
|
|
12938
|
-
),
|
|
12939
|
-
"aria-label": mergedLabels.incrementQuantityAriaLabel,
|
|
12940
|
-
size: "small",
|
|
12941
|
-
onClick: () => {
|
|
12942
|
-
const currentVal = getValues(
|
|
12943
|
-
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
12944
|
-
) || 0;
|
|
12945
|
-
const currentQty = Number(currentVal);
|
|
12946
|
-
const newVal = currentQty + 1;
|
|
12947
|
-
setValue(
|
|
12948
|
-
`owners.${index}.cargo.${cargoIndex}.quantity`,
|
|
12949
|
-
newVal
|
|
12950
|
-
);
|
|
12951
|
-
onUpdateCargoQuantity(
|
|
12952
|
-
owner.id,
|
|
12953
|
-
cargo.id,
|
|
12954
|
-
newVal
|
|
12955
|
-
);
|
|
12956
|
-
},
|
|
12957
|
-
style: {
|
|
12958
|
-
minWidth: "32px",
|
|
12959
|
-
padding: "0"
|
|
12960
|
-
}
|
|
12961
|
-
}
|
|
12962
|
-
)
|
|
12963
|
-
]
|
|
12964
|
-
}
|
|
12965
|
-
),
|
|
12966
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
12967
|
-
"div",
|
|
12968
|
-
{
|
|
12969
|
-
style: {
|
|
12970
|
-
flex: 1,
|
|
12971
|
-
textAlign: "left",
|
|
12972
|
-
color: reactComponents.tokens.colorNeutralForeground1,
|
|
12973
|
-
fontSize: reactComponents.tokens.fontSizeBase300,
|
|
12974
|
-
paddingRight: "8px"
|
|
12975
|
-
},
|
|
12976
|
-
children: (() => {
|
|
12977
|
-
const type2 = watch(
|
|
12978
|
-
`owners.${index}.cargo.${cargoIndex}.cargoType`
|
|
12979
|
-
);
|
|
12980
|
-
const selectedLoadType2 = loadTypes.find(
|
|
12981
|
-
(loadType) => loadType.id === type2
|
|
12982
|
-
);
|
|
12983
|
-
return selectedLoadType2?.unit?.name || "87";
|
|
12984
|
-
})()
|
|
12985
|
-
}
|
|
12986
|
-
)
|
|
12987
|
-
]
|
|
12988
|
-
}
|
|
12989
|
-
)
|
|
12990
|
-
] });
|
|
12991
|
-
})(),
|
|
12992
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
|
|
12993
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.priceLabel }),
|
|
12994
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body2, { style: { marginTop: "0.5rem" }, children: (() => {
|
|
12995
|
-
return new Intl.NumberFormat(
|
|
12996
|
-
language === "id" ? "id-ID" : "en-US",
|
|
12997
|
-
{
|
|
12998
|
-
style: "currency",
|
|
12999
|
-
currency: language === "id" ? "IDR" : "USD",
|
|
13000
|
-
minimumFractionDigits: 0
|
|
13001
|
-
}
|
|
13002
|
-
).format(
|
|
13003
|
-
Number(
|
|
13004
|
-
getValues(
|
|
13005
|
-
`owners.${index}.cargo.${cargoIndex}.price`
|
|
13006
|
-
) || 1234567890
|
|
13040
|
+
)
|
|
13041
|
+
]
|
|
13042
|
+
}
|
|
13043
|
+
),
|
|
13044
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13045
|
+
"div",
|
|
13046
|
+
{
|
|
13047
|
+
style: {
|
|
13048
|
+
flex: 1,
|
|
13049
|
+
textAlign: "left",
|
|
13050
|
+
color: reactComponents.tokens.colorNeutralForeground1,
|
|
13051
|
+
fontSize: reactComponents.tokens.fontSizeBase300,
|
|
13052
|
+
paddingRight: "8px"
|
|
13053
|
+
},
|
|
13054
|
+
children: (() => {
|
|
13055
|
+
const type2 = watch(
|
|
13056
|
+
`owners.${index}.cargo.${cargoIndex}.cargoType`
|
|
13057
|
+
);
|
|
13058
|
+
const selectedLoadType2 = loadTypes.find(
|
|
13059
|
+
(loadType) => loadType.id === type2
|
|
13060
|
+
);
|
|
13061
|
+
return selectedLoadType2?.unit?.name || "----87----";
|
|
13062
|
+
})()
|
|
13063
|
+
}
|
|
13064
|
+
)
|
|
13065
|
+
]
|
|
13066
|
+
}
|
|
13007
13067
|
)
|
|
13008
|
-
)
|
|
13009
|
-
|
|
13010
|
-
|
|
13068
|
+
] }),
|
|
13069
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
|
|
13070
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 0.5 } }),
|
|
13071
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: mergedLabels.priceLabel }),
|
|
13072
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13073
|
+
reactComponents.Body2,
|
|
13074
|
+
{
|
|
13075
|
+
style: { marginTop: "0.5rem" },
|
|
13076
|
+
children: (() => {
|
|
13077
|
+
return new Intl.NumberFormat(
|
|
13078
|
+
"id-ID",
|
|
13079
|
+
{
|
|
13080
|
+
style: "currency",
|
|
13081
|
+
currency: "IDR",
|
|
13082
|
+
minimumFractionDigits: 0
|
|
13083
|
+
}
|
|
13084
|
+
).format(
|
|
13085
|
+
Number(
|
|
13086
|
+
getValues(
|
|
13087
|
+
`owners.${index}.cargo.${cargoIndex}.quantity`
|
|
13088
|
+
) || 0
|
|
13089
|
+
) * (selectedLoadType?.price || 0)
|
|
13090
|
+
);
|
|
13091
|
+
})()
|
|
13092
|
+
}
|
|
13093
|
+
)
|
|
13094
|
+
] })
|
|
13095
|
+
] });
|
|
13096
|
+
})()
|
|
13011
13097
|
] }),
|
|
13012
13098
|
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
|
|
13013
13099
|
/* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 6, children: [
|