@asdp/ferryui 0.1.22-dev.10827 → 0.1.22-dev.10841

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.
Files changed (7) hide show
  1. package/dist/index.d.mts +3 -4
  2. package/dist/index.d.ts +3 -4
  3. package/dist/index.js +1067 -1003
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1069 -1005
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -1,10 +1,10 @@
1
- import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, InfoLabel, Body1, Body1Strong, Caption1, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Subtitle1, Title2, Divider, Title3, Spinner, Label, Text, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Menu, MenuTrigger, MenuPopover, MenuList, Radio, DialogActions, Caption2Strong, Link, Body2, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, typographyStyles, Switch, Textarea } from '@fluentui/react-components';
1
+ import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, InfoLabel, Body1, Body1Strong, Caption1, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Subtitle1, Title2, Divider, Spinner, Label, Text, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Menu, MenuTrigger, MenuPopover, MenuList, Radio, DialogActions, Caption2Strong, Title3, Link, Body2, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, typographyStyles, Switch, Textarea } from '@fluentui/react-components';
2
2
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
3
3
  import React, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
4
4
  import { ArrowDownloadRegular, Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular, ChevronDownRegular, ArrowRightRegular } from '@fluentui/react-icons';
5
5
  import { Container, Row, Col, Visible } from 'react-grid-system';
6
6
  import { Icon } from '@iconify/react';
7
- import { Controller, useForm, useWatch } from 'react-hook-form';
7
+ import { Controller, useForm, useWatch, useFieldArray } from 'react-hook-form';
8
8
  import PhoneInputComponent from 'react-phone-input-2';
9
9
  import Select from 'react-select';
10
10
  import { Calendar } from '@fluentui/react-calendar-compat';
@@ -1233,7 +1233,7 @@ var useStyles5 = makeStyles({
1233
1233
  position: "relative",
1234
1234
  overflow: "visible",
1235
1235
  background: "linear-gradient(75deg, #58C91B 0%, #1949E0 103.3%)",
1236
- padding: "5em",
1236
+ padding: "5em 6em 5em 4em",
1237
1237
  display: "flex",
1238
1238
  flexDirection: "column",
1239
1239
  justifyContent: "space-between",
@@ -1839,7 +1839,7 @@ var CardTicket = ({
1839
1839
  },
1840
1840
  children: [
1841
1841
  /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.totalPriceLabel }),
1842
- loadType === 6 ? /* @__PURE__ */ jsx(Body1Strong, { style: { wordBreak: "break-word" }, children: mergedLabels.totalPriceMissing }) : /* @__PURE__ */ jsx(Title3, { children: departureItem?.billingDetail?.total?.formatted })
1842
+ loadType === 6 ? /* @__PURE__ */ jsx(Body1Strong, { style: { wordBreak: "break-word" }, children: mergedLabels.totalPriceMissing }) : /* @__PURE__ */ jsx(Title2, { children: departureItem?.billingDetail?.total?.formatted })
1843
1843
  ]
1844
1844
  }
1845
1845
  ),
@@ -12809,10 +12809,9 @@ var DEFAULT_LABELS26 = {
12809
12809
  industryTypeOthersLabel: "Jenis Industri Lainnya",
12810
12810
  industryTypeOthersPlaceholder: "Masukkan Jenis Industri",
12811
12811
  cargoCategoryLabel: "Kategori Muatan",
12812
- estimatedLooseCargoLabel: "Estimasi Berat Barang Lepas",
12813
- estimatedLooseCargoWeightPlaceholder: "Masukkan Berat (Ton)",
12814
- estimatedLooseCargoQuantityLabel: "Jumlah Karung",
12815
- estimatedLooseCargoUnitLabel: "Karung",
12812
+ cargoLabel: "Estimasi Berat Barang Lepas",
12813
+ cargoWeightPlaceholder: "Masukkan Berat (Ton)",
12814
+ cargoUnitLabel: "Karung",
12816
12815
  deleteCargoButton: "Hapus Muatan",
12817
12816
  addCargoButton: "Tambah Muatan",
12818
12817
  loadTypeOptions: {
@@ -12869,10 +12868,9 @@ var DEFAULT_LABELS26 = {
12869
12868
  industryTypeOthersLabel: "Other Industry Type",
12870
12869
  industryTypeOthersPlaceholder: "Enter Industry Type",
12871
12870
  cargoCategoryLabel: "Cargo Category",
12872
- estimatedLooseCargoLabel: "Estimated Loose Cargo Weight",
12873
- estimatedLooseCargoWeightPlaceholder: "Enter Weight (Ton)",
12874
- estimatedLooseCargoQuantityLabel: "Number of Bags",
12875
- estimatedLooseCargoUnitLabel: "Bags",
12871
+ cargoLabel: "Estimated Loose Cargo Weight",
12872
+ cargoWeightPlaceholder: "Enter Weight (Ton)",
12873
+ cargoUnitLabel: "Bags",
12876
12874
  deleteCargoButton: "Delete Cargo",
12877
12875
  addCargoButton: "Add Cargo",
12878
12876
  loadTypeOptions: {
@@ -12960,7 +12958,7 @@ var CardVehicleOwnerForm = ({
12960
12958
  }) => {
12961
12959
  const styles = useStyles27();
12962
12960
  const mergedLabels = { ...DEFAULT_LABELS26[language], ...labels };
12963
- const formValues = watch();
12961
+ watch();
12964
12962
  const [defaultOpenCargoItems, setOpenCargoItems] = React.useState(/* @__PURE__ */ new Set());
12965
12963
  useEffect(() => {
12966
12964
  const allOpenItems = /* @__PURE__ */ new Set();
@@ -12973,9 +12971,38 @@ var CardVehicleOwnerForm = ({
12973
12971
  });
12974
12972
  setOpenCargoItems(allOpenItems);
12975
12973
  }, [owners]);
12976
- useEffect(() => {
12977
- console.log("[CardVehicleOwnerForm] Form values changed:", formValues);
12978
- }, [formValues]);
12974
+ function OwnerWeightSync({
12975
+ owner,
12976
+ ownerIndex
12977
+ }) {
12978
+ const { fields } = useFieldArray({
12979
+ control,
12980
+ name: `owners.${ownerIndex}.cargoItems`
12981
+ });
12982
+ console.log(140, fields);
12983
+ const cargoWeights = useWatch({
12984
+ control,
12985
+ name: fields.map(
12986
+ (_, cargoIndex) => `owners.${ownerIndex}.cargoItems.${cargoIndex}.cargoWeight`
12987
+ )
12988
+ });
12989
+ console.log(149, cargoWeights);
12990
+ useEffect(() => {
12991
+ const total = cargoWeights?.reduce(
12992
+ (sum, w) => sum + (Number(w) || 0),
12993
+ 0
12994
+ ) ?? 0;
12995
+ const current = Number(getValues(`owners.${ownerIndex}.estimatedWeight`)) || 0;
12996
+ console.log(160, current, total);
12997
+ if (current !== total) {
12998
+ setValue(`owners.${ownerIndex}.estimatedWeight`, total);
12999
+ onUpdateOwner(owner.id, {
13000
+ estimatedWeight: total
13001
+ });
13002
+ }
13003
+ }, [cargoWeights, ownerIndex, setValue, getValues]);
13004
+ return null;
13005
+ }
12979
13006
  return /* @__PURE__ */ jsxs(Card, { className: styles.card, children: [
12980
13007
  /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
12981
13008
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", flex: 1 }, children: [
@@ -12999,165 +13026,59 @@ var CardVehicleOwnerForm = ({
12999
13026
  collapsible: true,
13000
13027
  defaultOpenItems: owners.map((o) => String(o.id)),
13001
13028
  multiple: true,
13002
- children: owners.map((owner, index) => /* @__PURE__ */ jsxs(
13003
- AccordionItem,
13004
- {
13005
- value: String(owner.id),
13006
- className: styles.accordion,
13007
- children: [
13008
- /* @__PURE__ */ jsx(
13009
- AccordionHeader,
13010
- {
13011
- className: styles.accordionHeader,
13012
- expandIconPosition: "end",
13013
- children: /* @__PURE__ */ jsxs(
13014
- "div",
13015
- {
13016
- style: {
13017
- display: "flex",
13018
- justifyContent: "space-between",
13019
- alignItems: "center",
13020
- width: "100%"
13021
- },
13022
- children: [
13023
- /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.ownerInfoTitle.replace(
13024
- "{index}",
13025
- (index + 1).toString()
13026
- ) }),
13027
- owners.length > 1 && /* @__PURE__ */ jsx(
13028
- Button,
13029
- {
13030
- appearance: "transparent",
13031
- "aria-label": mergedLabels.deleteOwnerAriaLabel,
13032
- disabled,
13033
- icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:delete-24-regular" }),
13034
- onClick: (e) => {
13035
- e.stopPropagation();
13036
- onDeleteOwner(owner.id);
13037
- },
13038
- style: { color: tokens.colorPaletteRedForeground1 }
13039
- }
13040
- )
13041
- ]
13042
- }
13043
- )
13044
- }
13045
- ),
13046
- /* @__PURE__ */ jsx(AccordionPanel, { children: /* @__PURE__ */ jsxs("div", { className: styles.form, children: [
13047
- /* @__PURE__ */ jsxs(Row, { children: [
13048
- /* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13049
- mergedLabels.cargoOwnerTitle,
13050
- " ",
13051
- /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13052
- ] }) }),
13053
- /* @__PURE__ */ jsxs(Col, { lg: 12, children: [
13054
- /* @__PURE__ */ jsx(
13029
+ children: owners.map((owner, ownerIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
13030
+ /* @__PURE__ */ jsx(OwnerWeightSync, { owner, ownerIndex }),
13031
+ /* @__PURE__ */ jsxs(
13032
+ AccordionItem,
13033
+ {
13034
+ value: String(owner.id),
13035
+ className: styles.accordion,
13036
+ children: [
13037
+ /* @__PURE__ */ jsx(
13038
+ AccordionHeader,
13039
+ {
13040
+ className: styles.accordionHeader,
13041
+ expandIconPosition: "end",
13042
+ children: /* @__PURE__ */ jsxs(
13055
13043
  "div",
13056
13044
  {
13057
13045
  style: {
13058
13046
  display: "flex",
13059
- gap: "2rem",
13060
- marginBottom: "0.5rem"
13047
+ justifyContent: "space-between",
13048
+ alignItems: "center",
13049
+ width: "100%"
13061
13050
  },
13062
- children: /* @__PURE__ */ jsxs(
13063
- RadioGroup,
13064
- {
13065
- disabled,
13066
- layout: "horizontal",
13067
- onChange: (_, data) => {
13068
- onUpdateOwner(owner.id, {
13069
- cargoOwnerEntityType: data.value,
13070
- cargoOwnerEntity: "",
13071
- cargoOwnerEntityOther: ""
13072
- });
13073
- setValue(`owners.${index}.cargoOwnerEntity`, "");
13074
- setValue(`owners.${index}.cargoOwnerEntityOther`, "");
13075
- },
13076
- required: true,
13077
- value: owner.cargoOwnerEntityType || MANIFEST_ENTITY.COMPANY,
13078
- children: [
13079
- /* @__PURE__ */ jsx(
13080
- Radio,
13081
- {
13082
- value: MANIFEST_ENTITY.COMPANY,
13083
- label: mergedLabels.entityTypeCompany
13084
- }
13085
- ),
13086
- /* @__PURE__ */ jsx(
13087
- Radio,
13088
- {
13089
- value: MANIFEST_ENTITY.INDIVIDUAL,
13090
- label: mergedLabels.entityTypeIndividual
13091
- }
13092
- )
13093
- ]
13094
- }
13095
- )
13096
- }
13097
- ),
13098
- /* @__PURE__ */ jsxs(Row, { children: [
13099
- /* @__PURE__ */ jsx(
13100
- Col,
13101
- {
13102
- lg: owner.cargoOwnerEntityType === MANIFEST_ENTITY.COMPANY && owner.cargoOwnerEntity === HARDCODED_ID.COMPANY__LAINNYA ? 6 : 12,
13103
- children: /* @__PURE__ */ jsx(
13104
- InputDynamic_default,
13051
+ children: [
13052
+ /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.ownerInfoTitle.replace(
13053
+ "{index}",
13054
+ (ownerIndex + 1).toString()
13055
+ ) }),
13056
+ owners.length > 1 && /* @__PURE__ */ jsx(
13057
+ Button,
13105
13058
  {
13059
+ appearance: "transparent",
13060
+ "aria-label": mergedLabels.deleteOwnerAriaLabel,
13106
13061
  disabled,
13107
- control,
13108
- name: `owners.${index}.cargoOwnerEntity`,
13109
- options: owner.cargoOwnerEntityType === MANIFEST_ENTITY.COMPANY ? companyOwnerOptions : [],
13110
- onChange: (val) => {
13111
- setValue(`owners.${index}.cargoOwnerEntity`, val);
13112
- onUpdateOwner(owner.id, {
13113
- cargoOwnerEntity: val
13114
- });
13062
+ icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:delete-24-regular" }),
13063
+ onClick: (e) => {
13064
+ e.stopPropagation();
13065
+ onDeleteOwner(owner.id);
13115
13066
  },
13116
- placeholder: owner.cargoOwnerEntityType === MANIFEST_ENTITY.COMPANY ? mergedLabels.cargoOwnerCompanyPlaceholder : mergedLabels.cargoOwnerIndividualPlaceholder,
13117
- required: true,
13118
- size: "large",
13119
- type: owner.cargoOwnerEntityType === MANIFEST_ENTITY.COMPANY ? "select" : "text"
13067
+ style: { color: tokens.colorPaletteRedForeground1 }
13120
13068
  }
13121
13069
  )
13122
- }
13123
- ),
13124
- owner.cargoOwnerEntityType === MANIFEST_ENTITY.COMPANY && owner.cargoOwnerEntity === HARDCODED_ID.COMPANY__LAINNYA && /* @__PURE__ */ jsx(Col, { xl: 6, children: /* @__PURE__ */ jsx(
13125
- InputDynamic_default,
13126
- {
13127
- control,
13128
- disabled,
13129
- name: `owners.${index}.cargoOwnerEntityOther`,
13130
- placeholder: owner.cargoOwnerEntityType === MANIFEST_ENTITY.COMPANY ? mergedLabels.selectCompanyPlaceholder : mergedLabels.inputSenderNamePlaceholder,
13131
- required: true,
13132
- size: "large",
13133
- type: "text",
13134
- onChange: (val) => {
13135
- setValue(
13136
- `owners.${index}.cargoOwnerEntityOther`,
13137
- val
13138
- );
13139
- onUpdateOwner(owner.id, {
13140
- cargoOwnerEntityOther: val
13141
- });
13142
- }
13143
- }
13144
- ) })
13145
- ] }),
13146
- /* @__PURE__ */ jsx(
13147
- Caption1,
13148
- {
13149
- style: {
13150
- color: tokens.colorNeutralForeground3,
13151
- marginTop: "0.25rem"
13152
- },
13153
- children: mergedLabels.otherCompanyHelperText
13070
+ ]
13154
13071
  }
13155
13072
  )
13156
- ] })
13157
- ] }),
13158
- hasLoad && /* @__PURE__ */ jsxs(Fragment, { children: [
13159
- /* @__PURE__ */ jsxs(Row, { nogutter: true, children: [
13160
- /* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.cargoReceiverTitle }) }),
13073
+ }
13074
+ ),
13075
+ /* @__PURE__ */ jsx(AccordionPanel, { children: /* @__PURE__ */ jsxs("div", { className: styles.form, children: [
13076
+ /* @__PURE__ */ jsxs(Row, { children: [
13077
+ /* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13078
+ mergedLabels.cargoOwnerTitle,
13079
+ " ",
13080
+ /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13081
+ ] }) }),
13161
13082
  /* @__PURE__ */ jsxs(Col, { lg: 12, children: [
13162
13083
  /* @__PURE__ */ jsx(
13163
13084
  "div",
@@ -13174,21 +13095,21 @@ var CardVehicleOwnerForm = ({
13174
13095
  layout: "horizontal",
13175
13096
  onChange: (_, data) => {
13176
13097
  onUpdateOwner(owner.id, {
13177
- cargoReceiverEntityType: data.value,
13178
- cargoReceiverEntity: "",
13179
- cargoReceiverEntityOther: ""
13098
+ cargoOwnerEntityType: data.value,
13099
+ cargoOwnerEntity: "",
13100
+ cargoOwnerEntityOther: ""
13180
13101
  });
13181
13102
  setValue(
13182
- `owners.${index}.cargoReceiverEntity`,
13103
+ `owners.${ownerIndex}.cargoOwnerEntity`,
13183
13104
  ""
13184
13105
  );
13185
13106
  setValue(
13186
- `owners.${index}.cargoReceiverEntityOther`,
13107
+ `owners.${ownerIndex}.cargoOwnerEntityOther`,
13187
13108
  ""
13188
13109
  );
13189
13110
  },
13190
13111
  required: true,
13191
- value: owner.cargoReceiverEntityType || MANIFEST_ENTITY.COMPANY,
13112
+ value: owner.cargoOwnerEntityType || MANIFEST_ENTITY.COMPANY,
13192
13113
  children: [
13193
13114
  /* @__PURE__ */ jsx(
13194
13115
  Radio,
@@ -13213,48 +13134,48 @@ var CardVehicleOwnerForm = ({
13213
13134
  /* @__PURE__ */ jsx(
13214
13135
  Col,
13215
13136
  {
13216
- lg: owner.cargoReceiverEntityType === MANIFEST_ENTITY.COMPANY && owner.cargoReceiverEntity === HARDCODED_ID.COMPANY__LAINNYA ? 6 : 12,
13137
+ lg: owner.cargoOwnerEntityType === MANIFEST_ENTITY.COMPANY && owner.cargoOwnerEntity === HARDCODED_ID.COMPANY__LAINNYA ? 6 : 12,
13217
13138
  children: /* @__PURE__ */ jsx(
13218
13139
  InputDynamic_default,
13219
13140
  {
13220
- control,
13221
13141
  disabled,
13222
- name: `owners.${index}.cargoReceiverEntity`,
13223
- placeholder: owner.cargoReceiverEntityType === MANIFEST_ENTITY.COMPANY ? mergedLabels.cargoReceiverCompanyPlaceholder : mergedLabels.cargoReceiverIndividualPlaceholder,
13224
- required: true,
13225
- size: "large",
13226
- type: owner.cargoReceiverEntityType === MANIFEST_ENTITY.COMPANY ? "select" : "text",
13227
- options: owner.cargoReceiverEntityType === MANIFEST_ENTITY.COMPANY ? companyReceiverOptions : [],
13142
+ control,
13143
+ name: `owners.${ownerIndex}.cargoOwnerEntity`,
13144
+ options: owner.cargoOwnerEntityType === MANIFEST_ENTITY.COMPANY ? companyOwnerOptions : [],
13228
13145
  onChange: (val) => {
13229
13146
  setValue(
13230
- `owners.${index}.cargoReceiverEntity`,
13147
+ `owners.${ownerIndex}.cargoOwnerEntity`,
13231
13148
  val
13232
13149
  );
13233
13150
  onUpdateOwner(owner.id, {
13234
- cargoReceiverEntity: val
13151
+ cargoOwnerEntity: val
13235
13152
  });
13236
- }
13153
+ },
13154
+ placeholder: owner.cargoOwnerEntityType === MANIFEST_ENTITY.COMPANY ? mergedLabels.cargoOwnerCompanyPlaceholder : mergedLabels.cargoOwnerIndividualPlaceholder,
13155
+ required: true,
13156
+ size: "large",
13157
+ type: owner.cargoOwnerEntityType === MANIFEST_ENTITY.COMPANY ? "select" : "text"
13237
13158
  }
13238
13159
  )
13239
13160
  }
13240
13161
  ),
13241
- owner.cargoReceiverEntityType === MANIFEST_ENTITY.COMPANY && owner.cargoReceiverEntity === HARDCODED_ID.COMPANY__LAINNYA && /* @__PURE__ */ jsx(Col, { lg: 6, children: /* @__PURE__ */ jsx(
13162
+ owner.cargoOwnerEntityType === MANIFEST_ENTITY.COMPANY && owner.cargoOwnerEntity === HARDCODED_ID.COMPANY__LAINNYA && /* @__PURE__ */ jsx(Col, { xl: 6, children: /* @__PURE__ */ jsx(
13242
13163
  InputDynamic_default,
13243
13164
  {
13244
13165
  control,
13245
13166
  disabled,
13246
- name: `owners.${index}.cargoReceiverEntityOther`,
13247
- placeholder: owner.cargoReceiverEntityType === MANIFEST_ENTITY.COMPANY ? mergedLabels.selectCompanyPlaceholder : mergedLabels.inputSenderNamePlaceholder,
13167
+ name: `owners.${ownerIndex}.cargoOwnerEntityOther`,
13168
+ placeholder: owner.cargoOwnerEntityType === MANIFEST_ENTITY.COMPANY ? mergedLabels.selectCompanyPlaceholder : mergedLabels.inputSenderNamePlaceholder,
13248
13169
  required: true,
13249
13170
  size: "large",
13250
13171
  type: "text",
13251
13172
  onChange: (val) => {
13252
13173
  setValue(
13253
- `owners.${index}.cargoReceiverEntityOther`,
13174
+ `owners.${ownerIndex}.cargoOwnerEntityOther`,
13254
13175
  val
13255
13176
  );
13256
13177
  onUpdateOwner(owner.id, {
13257
- cargoReceiverEntityOther: val
13178
+ cargoOwnerEntityOther: val
13258
13179
  });
13259
13180
  }
13260
13181
  }
@@ -13272,895 +13193,1038 @@ var CardVehicleOwnerForm = ({
13272
13193
  )
13273
13194
  ] })
13274
13195
  ] }),
13275
- /* @__PURE__ */ jsxs(Row, { nogutter: true, children: [
13276
- /* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13277
- mergedLabels.logisticsCompanyTitle,
13278
- " ",
13279
- /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13280
- ] }) }),
13281
- /* @__PURE__ */ jsxs(Col, { lg: 12, children: [
13282
- /* @__PURE__ */ jsx(
13283
- "div",
13284
- {
13285
- style: {
13286
- display: "flex",
13287
- gap: "2rem",
13288
- marginBottom: "0.5rem"
13289
- },
13290
- children: /* @__PURE__ */ jsxs(
13291
- RadioGroup,
13196
+ hasLoad && /* @__PURE__ */ jsxs(Fragment, { children: [
13197
+ /* @__PURE__ */ jsxs(Row, { nogutter: true, children: [
13198
+ /* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.cargoReceiverTitle }) }),
13199
+ /* @__PURE__ */ jsxs(Col, { lg: 12, children: [
13200
+ /* @__PURE__ */ jsx(
13201
+ "div",
13202
+ {
13203
+ style: {
13204
+ display: "flex",
13205
+ gap: "2rem",
13206
+ marginBottom: "0.5rem"
13207
+ },
13208
+ children: /* @__PURE__ */ jsxs(
13209
+ RadioGroup,
13210
+ {
13211
+ disabled,
13212
+ layout: "horizontal",
13213
+ onChange: (_, data) => {
13214
+ onUpdateOwner(owner.id, {
13215
+ cargoReceiverEntityType: data.value,
13216
+ cargoReceiverEntity: "",
13217
+ cargoReceiverEntityOther: ""
13218
+ });
13219
+ setValue(
13220
+ `owners.${ownerIndex}.cargoReceiverEntity`,
13221
+ ""
13222
+ );
13223
+ setValue(
13224
+ `owners.${ownerIndex}.cargoReceiverEntityOther`,
13225
+ ""
13226
+ );
13227
+ },
13228
+ required: true,
13229
+ value: owner.cargoReceiverEntityType || MANIFEST_ENTITY.COMPANY,
13230
+ children: [
13231
+ /* @__PURE__ */ jsx(
13232
+ Radio,
13233
+ {
13234
+ value: MANIFEST_ENTITY.COMPANY,
13235
+ label: mergedLabels.entityTypeCompany
13236
+ }
13237
+ ),
13238
+ /* @__PURE__ */ jsx(
13239
+ Radio,
13240
+ {
13241
+ value: MANIFEST_ENTITY.INDIVIDUAL,
13242
+ label: mergedLabels.entityTypeIndividual
13243
+ }
13244
+ )
13245
+ ]
13246
+ }
13247
+ )
13248
+ }
13249
+ ),
13250
+ /* @__PURE__ */ jsxs(Row, { children: [
13251
+ /* @__PURE__ */ jsx(
13252
+ Col,
13253
+ {
13254
+ lg: owner.cargoReceiverEntityType === MANIFEST_ENTITY.COMPANY && owner.cargoReceiverEntity === HARDCODED_ID.COMPANY__LAINNYA ? 6 : 12,
13255
+ children: /* @__PURE__ */ jsx(
13256
+ InputDynamic_default,
13257
+ {
13258
+ control,
13259
+ disabled,
13260
+ name: `owners.${ownerIndex}.cargoReceiverEntity`,
13261
+ placeholder: owner.cargoReceiverEntityType === MANIFEST_ENTITY.COMPANY ? mergedLabels.cargoReceiverCompanyPlaceholder : mergedLabels.cargoReceiverIndividualPlaceholder,
13262
+ required: true,
13263
+ size: "large",
13264
+ type: owner.cargoReceiverEntityType === MANIFEST_ENTITY.COMPANY ? "select" : "text",
13265
+ options: owner.cargoReceiverEntityType === MANIFEST_ENTITY.COMPANY ? companyReceiverOptions : [],
13266
+ onChange: (val) => {
13267
+ setValue(
13268
+ `owners.${ownerIndex}.cargoReceiverEntity`,
13269
+ val
13270
+ );
13271
+ onUpdateOwner(owner.id, {
13272
+ cargoReceiverEntity: val
13273
+ });
13274
+ }
13275
+ }
13276
+ )
13277
+ }
13278
+ ),
13279
+ owner.cargoReceiverEntityType === MANIFEST_ENTITY.COMPANY && owner.cargoReceiverEntity === HARDCODED_ID.COMPANY__LAINNYA && /* @__PURE__ */ jsx(Col, { lg: 6, children: /* @__PURE__ */ jsx(
13280
+ InputDynamic_default,
13292
13281
  {
13282
+ control,
13293
13283
  disabled,
13294
- layout: "horizontal",
13295
- onChange: (_, data) => {
13296
- onUpdateOwner(owner.id, {
13297
- logisticsEntityType: data.value,
13298
- logisticsEntity: "",
13299
- logisticsEntityOther: ""
13300
- });
13301
- setValue(`owners.${index}.logisticsEntity`, "");
13284
+ name: `owners.${ownerIndex}.cargoReceiverEntityOther`,
13285
+ placeholder: owner.cargoReceiverEntityType === MANIFEST_ENTITY.COMPANY ? mergedLabels.selectCompanyPlaceholder : mergedLabels.inputSenderNamePlaceholder,
13286
+ required: true,
13287
+ size: "large",
13288
+ type: "text",
13289
+ onChange: (val) => {
13302
13290
  setValue(
13303
- `owners.${index}.logisticsEntityOther`,
13304
- ""
13291
+ `owners.${ownerIndex}.cargoReceiverEntityOther`,
13292
+ val
13305
13293
  );
13306
- },
13307
- required: true,
13308
- value: owner.logisticsEntityType || MANIFEST_ENTITY.COMPANY,
13309
- children: [
13310
- /* @__PURE__ */ jsx(
13311
- Radio,
13312
- {
13313
- value: MANIFEST_ENTITY.COMPANY,
13314
- label: mergedLabels.entityTypeCompany
13315
- }
13316
- ),
13317
- /* @__PURE__ */ jsx(
13318
- Radio,
13319
- {
13320
- value: MANIFEST_ENTITY.INDIVIDUAL,
13321
- label: mergedLabels.entityTypeIndividual
13322
- }
13323
- )
13324
- ]
13294
+ onUpdateOwner(owner.id, {
13295
+ cargoReceiverEntityOther: val
13296
+ });
13297
+ }
13325
13298
  }
13326
- )
13327
- }
13328
- ),
13329
- /* @__PURE__ */ jsxs(Row, { children: [
13299
+ ) })
13300
+ ] }),
13330
13301
  /* @__PURE__ */ jsx(
13331
- Col,
13302
+ Caption1,
13332
13303
  {
13333
- xl: owner.logisticsEntityType === MANIFEST_ENTITY.COMPANY && owner.logisticsEntity === HARDCODED_ID.COMPANY__LAINNYA ? 6 : 12,
13334
- children: /* @__PURE__ */ jsx(
13335
- InputDynamic_default,
13304
+ style: {
13305
+ color: tokens.colorNeutralForeground3,
13306
+ marginTop: "0.25rem"
13307
+ },
13308
+ children: mergedLabels.otherCompanyHelperText
13309
+ }
13310
+ )
13311
+ ] })
13312
+ ] }),
13313
+ /* @__PURE__ */ jsxs(Row, { nogutter: true, children: [
13314
+ /* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13315
+ mergedLabels.logisticsCompanyTitle,
13316
+ " ",
13317
+ /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13318
+ ] }) }),
13319
+ /* @__PURE__ */ jsxs(Col, { lg: 12, children: [
13320
+ /* @__PURE__ */ jsx(
13321
+ "div",
13322
+ {
13323
+ style: {
13324
+ display: "flex",
13325
+ gap: "2rem",
13326
+ marginBottom: "0.5rem"
13327
+ },
13328
+ children: /* @__PURE__ */ jsxs(
13329
+ RadioGroup,
13336
13330
  {
13337
- control,
13338
13331
  disabled,
13339
- name: `owners.${index}.logisticsEntity`,
13340
- placeholder: owner.logisticsEntityType === MANIFEST_ENTITY.COMPANY ? mergedLabels.logisticsCompanyPlaceholder : mergedLabels.logisticsIndividualPlaceholder,
13341
- required: true,
13342
- size: "large",
13343
- type: owner.logisticsEntityType === MANIFEST_ENTITY.COMPANY ? "select" : "text",
13344
- options: owner.logisticsEntityType === MANIFEST_ENTITY.COMPANY ? companyLogisticsOptions : [],
13345
- onChange: (val) => {
13346
- setValue(
13347
- `owners.${index}.logisticsEntity`,
13348
- val
13349
- );
13332
+ layout: "horizontal",
13333
+ onChange: (_, data) => {
13350
13334
  onUpdateOwner(owner.id, {
13351
- logisticsEntity: val
13335
+ logisticsEntityType: data.value,
13336
+ logisticsEntity: "",
13337
+ logisticsEntityOther: ""
13352
13338
  });
13353
- }
13339
+ setValue(
13340
+ `owners.${ownerIndex}.logisticsEntity`,
13341
+ ""
13342
+ );
13343
+ setValue(
13344
+ `owners.${ownerIndex}.logisticsEntityOther`,
13345
+ ""
13346
+ );
13347
+ },
13348
+ required: true,
13349
+ value: owner.logisticsEntityType || MANIFEST_ENTITY.COMPANY,
13350
+ children: [
13351
+ /* @__PURE__ */ jsx(
13352
+ Radio,
13353
+ {
13354
+ value: MANIFEST_ENTITY.COMPANY,
13355
+ label: mergedLabels.entityTypeCompany
13356
+ }
13357
+ ),
13358
+ /* @__PURE__ */ jsx(
13359
+ Radio,
13360
+ {
13361
+ value: MANIFEST_ENTITY.INDIVIDUAL,
13362
+ label: mergedLabels.entityTypeIndividual
13363
+ }
13364
+ )
13365
+ ]
13354
13366
  }
13355
13367
  )
13356
13368
  }
13357
13369
  ),
13358
- owner.logisticsEntityType === MANIFEST_ENTITY.COMPANY && owner.logisticsEntity === HARDCODED_ID.COMPANY__LAINNYA && /* @__PURE__ */ jsx(Col, { xl: 6, children: /* @__PURE__ */ jsx(
13359
- InputDynamic_default,
13360
- {
13361
- control,
13362
- disabled,
13363
- name: `owners.${index}.logisticsEntityOther`,
13364
- placeholder: owner.logisticsEntityType === MANIFEST_ENTITY.COMPANY ? mergedLabels.selectCompanyPlaceholder : mergedLabels.inputSenderNamePlaceholder,
13365
- required: true,
13366
- size: "large",
13367
- type: "text",
13368
- onChange: (val) => {
13369
- setValue(
13370
- `owners.${index}.logisticsEntityOther`,
13371
- val
13372
- );
13373
- onUpdateOwner(owner.id, {
13374
- logisticsEntityOther: val
13375
- });
13370
+ /* @__PURE__ */ jsxs(Row, { children: [
13371
+ /* @__PURE__ */ jsx(
13372
+ Col,
13373
+ {
13374
+ xl: owner.logisticsEntityType === MANIFEST_ENTITY.COMPANY && owner.logisticsEntity === HARDCODED_ID.COMPANY__LAINNYA ? 6 : 12,
13375
+ children: /* @__PURE__ */ jsx(
13376
+ InputDynamic_default,
13377
+ {
13378
+ control,
13379
+ disabled,
13380
+ name: `owners.${ownerIndex}.logisticsEntity`,
13381
+ placeholder: owner.logisticsEntityType === MANIFEST_ENTITY.COMPANY ? mergedLabels.logisticsCompanyPlaceholder : mergedLabels.logisticsIndividualPlaceholder,
13382
+ required: true,
13383
+ size: "large",
13384
+ type: owner.logisticsEntityType === MANIFEST_ENTITY.COMPANY ? "select" : "text",
13385
+ options: owner.logisticsEntityType === MANIFEST_ENTITY.COMPANY ? companyLogisticsOptions : [],
13386
+ onChange: (val) => {
13387
+ setValue(
13388
+ `owners.${ownerIndex}.logisticsEntity`,
13389
+ val
13390
+ );
13391
+ onUpdateOwner(owner.id, {
13392
+ logisticsEntity: val
13393
+ });
13394
+ }
13395
+ }
13396
+ )
13376
13397
  }
13377
- }
13378
- ) })
13379
- ] })
13380
- ] }),
13381
- /* @__PURE__ */ jsx(
13382
- Caption1,
13383
- {
13384
- style: {
13385
- color: tokens.colorNeutralForeground3,
13386
- marginTop: "0.25rem"
13387
- },
13388
- children: mergedLabels.otherCompanyHelperText
13389
- }
13390
- )
13391
- ] })
13392
- ] }),
13393
- /* @__PURE__ */ jsxs(Row, { children: [
13394
- /* @__PURE__ */ jsxs(Col, { xl: 6, children: [
13395
- /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.originCityLabel }),
13396
- /* @__PURE__ */ jsx(
13397
- InputDynamic_default,
13398
- {
13399
- control,
13400
- disabled,
13401
- name: `owners.${index}.originCity`,
13402
- onChange: (val) => {
13403
- setValue(`owners.${index}.originCity`, val);
13404
- onUpdateOwner(owner.id, {
13405
- originCity: val
13406
- });
13407
- },
13408
- options: cityOriginOptions,
13409
- placeholder: mergedLabels.selectPlaceholder,
13410
- required: true,
13411
- size: "large",
13412
- type: "select"
13413
- }
13414
- )
13415
- ] }),
13416
- /* @__PURE__ */ jsxs(Col, { xl: 6, children: [
13417
- /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.destinationCityLabel }),
13418
- /* @__PURE__ */ jsx(
13419
- InputDynamic_default,
13420
- {
13421
- control,
13422
- disabled,
13423
- name: `owners.${index}.destinationCity`,
13424
- options: cityDestinationOptions,
13425
- onChange: (val) => {
13426
- setValue(`owners.${index}.destinationCity`, val);
13427
- onUpdateOwner(owner.id, {
13428
- destinationCity: val
13429
- });
13430
- },
13431
- placeholder: mergedLabels.selectPlaceholder,
13432
- required: true,
13433
- size: "large",
13434
- type: "select"
13435
- }
13436
- )
13398
+ ),
13399
+ owner.logisticsEntityType === MANIFEST_ENTITY.COMPANY && owner.logisticsEntity === HARDCODED_ID.COMPANY__LAINNYA && /* @__PURE__ */ jsx(Col, { xl: 6, children: /* @__PURE__ */ jsx(
13400
+ InputDynamic_default,
13401
+ {
13402
+ control,
13403
+ disabled,
13404
+ name: `owners.${ownerIndex}.logisticsEntityOther`,
13405
+ placeholder: owner.logisticsEntityType === MANIFEST_ENTITY.COMPANY ? mergedLabels.selectCompanyPlaceholder : mergedLabels.inputSenderNamePlaceholder,
13406
+ required: true,
13407
+ size: "large",
13408
+ type: "text",
13409
+ onChange: (val) => {
13410
+ setValue(
13411
+ `owners.${ownerIndex}.logisticsEntityOther`,
13412
+ val
13413
+ );
13414
+ onUpdateOwner(owner.id, {
13415
+ logisticsEntityOther: val
13416
+ });
13417
+ }
13418
+ }
13419
+ ) })
13420
+ ] })
13421
+ ] }),
13422
+ /* @__PURE__ */ jsx(
13423
+ Caption1,
13424
+ {
13425
+ style: {
13426
+ color: tokens.colorNeutralForeground3,
13427
+ marginTop: "0.25rem"
13428
+ },
13429
+ children: mergedLabels.otherCompanyHelperText
13430
+ }
13431
+ )
13432
+ ] })
13437
13433
  ] }),
13438
- /* @__PURE__ */ jsxs(Col, { lg: 12, children: [
13439
- /* @__PURE__ */ jsx("div", { style: { height: "1rem" } }),
13440
- /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13441
- mergedLabels.estimatedVehicleWeightLabel,
13442
- " ",
13443
- /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13434
+ /* @__PURE__ */ jsxs(Row, { children: [
13435
+ /* @__PURE__ */ jsxs(Col, { xl: 6, children: [
13436
+ /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.originCityLabel }),
13437
+ /* @__PURE__ */ jsx(
13438
+ InputDynamic_default,
13439
+ {
13440
+ control,
13441
+ disabled,
13442
+ name: `owners.${ownerIndex}.originCity`,
13443
+ onChange: (val) => {
13444
+ setValue(`owners.${ownerIndex}.originCity`, val);
13445
+ onUpdateOwner(owner.id, {
13446
+ originCity: val
13447
+ });
13448
+ },
13449
+ options: cityOriginOptions,
13450
+ placeholder: mergedLabels.selectPlaceholder,
13451
+ required: true,
13452
+ size: "large",
13453
+ type: "select"
13454
+ }
13455
+ )
13444
13456
  ] }),
13445
- /* @__PURE__ */ jsx(
13446
- InputDynamic_default,
13447
- {
13448
- control,
13449
- disabled,
13450
- name: `owners.${index}.estimatedWeight`,
13451
- placeholder: mergedLabels.inputNumberPlaceholder,
13452
- required: true,
13453
- size: "large",
13454
- type: "number",
13455
- onChange: (val) => {
13456
- setValue(`owners.${index}.estimatedWeight`, val);
13457
- onUpdateOwner(owner.id, {
13458
- estimatedWeight: val
13459
- });
13457
+ /* @__PURE__ */ jsxs(Col, { xl: 6, children: [
13458
+ /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.destinationCityLabel }),
13459
+ /* @__PURE__ */ jsx(
13460
+ InputDynamic_default,
13461
+ {
13462
+ control,
13463
+ disabled,
13464
+ name: `owners.${ownerIndex}.destinationCity`,
13465
+ options: cityDestinationOptions,
13466
+ onChange: (val) => {
13467
+ setValue(`owners.${ownerIndex}.destinationCity`, val);
13468
+ onUpdateOwner(owner.id, {
13469
+ destinationCity: val
13470
+ });
13471
+ },
13472
+ placeholder: mergedLabels.selectPlaceholder,
13473
+ required: true,
13474
+ size: "large",
13475
+ type: "select"
13460
13476
  }
13461
- }
13462
- )
13463
- ] })
13464
- ] }),
13465
- hasLoad && /* @__PURE__ */ jsxs(Fragment, { children: [
13466
- /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.cargoListTitle }) }) }),
13467
- /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Col, { xs: 12, children: [
13468
- /* @__PURE__ */ jsx(
13469
- Accordion,
13470
- {
13471
- collapsible: true,
13472
- defaultOpenItems: Array.from(defaultOpenCargoItems),
13473
- onToggle: (e, data) => {
13474
- const newOpenItems = new Set(data.openItems);
13475
- setOpenCargoItems(newOpenItems);
13476
- const updatedCargoItems = owner.cargoItems?.map((cargo) => ({
13477
- ...cargo,
13478
- _isAccordionOpen: newOpenItems.has(`cargo-${cargo.id}`)
13479
- }));
13480
- onUpdateOwner(owner.id, {
13481
- cargoItems: updatedCargoItems
13482
- });
13483
- },
13484
- multiple: true,
13485
- children: owner.cargoItems?.map((cargo, cargoIndex) => {
13486
- const watchCommodity = watch(
13487
- `owners.${index}.cargo.${cargoIndex}.commodity`
13488
- );
13489
- const watchLoadType = watch(
13490
- `owners.${index}.cargo.${cargoIndex}.loadType`
13491
- );
13492
- const watchIndustryType = watch(
13493
- `owners.${index}.cargo.${cargoIndex}.industryType`
13494
- );
13495
- const watchQuantity = watch(
13496
- `owners.${index}.cargo.${cargoIndex}.quantity`
13497
- );
13498
- let _loadTypeOptions = [];
13499
- if (watchCommodity && loadTypeOptionsByCommodityId[watchCommodity]) {
13500
- _loadTypeOptions = loadTypeOptionsByCommodityId[watchCommodity];
13501
- } else {
13502
- _loadTypeOptions = loadTypeOptions.map((lt) => ({
13503
- value: lt.id.toString(),
13504
- label: `${lt.name}${lt.unit?.name ? ` (${lt.unit.name})` : ""}`
13505
- }));
13477
+ )
13478
+ ] }),
13479
+ /* @__PURE__ */ jsxs(Col, { lg: 12, children: [
13480
+ /* @__PURE__ */ jsx("div", { style: { height: "1rem" } }),
13481
+ /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13482
+ mergedLabels.estimatedVehicleWeightLabel,
13483
+ " ",
13484
+ /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13485
+ ] }),
13486
+ /* @__PURE__ */ jsx(
13487
+ InputDynamic_default,
13488
+ {
13489
+ control,
13490
+ disabled,
13491
+ name: `owners.${ownerIndex}.estimatedWeight`,
13492
+ placeholder: mergedLabels.inputNumberPlaceholder,
13493
+ required: true,
13494
+ size: "large",
13495
+ type: "number",
13496
+ onChange: (val) => {
13497
+ setValue(`owners.${ownerIndex}.estimatedWeight`, val);
13498
+ onUpdateOwner(owner.id, {
13499
+ estimatedWeight: val
13500
+ });
13506
13501
  }
13507
- const _selectedLoadType = loadTypes.find(
13508
- (loadType) => loadType.id.toString() === watchLoadType
13509
- );
13510
- const isLoadTypeOther = _loadTypeOptions.find(
13511
- (lt) => lt.value.toString() === String(watchLoadType)
13512
- )?.label.startsWith(
13513
- HARDCODED_NAME.LOAD_TYPE__LAINNYA
13514
- );
13515
- const isIndustryTypeOther = industryOptions?.find(
13516
- (it) => it.value.toString() === String(watchIndustryType)
13517
- )?.label === HARDCODED_NAME.INDUSTRY_TYPE__LAINNYA;
13518
- return /* @__PURE__ */ jsxs(
13519
- AccordionItem,
13520
- {
13521
- value: `cargo-${cargo.id}`,
13522
- className: styles.accordion,
13523
- children: [
13524
- /* @__PURE__ */ jsx(
13525
- AccordionHeader,
13526
- {
13527
- className: styles.accordionHeader,
13528
- expandIconPosition: "end",
13529
- children: /* @__PURE__ */ jsxs(
13530
- "div",
13531
- {
13532
- style: {
13533
- display: "flex",
13534
- justifyContent: "space-between",
13535
- alignItems: "center",
13536
- width: "100%",
13537
- gap: "1rem"
13538
- },
13539
- children: [
13540
- /* @__PURE__ */ jsx(Body1Strong, { style: { minWidth: "fit-content" }, children: mergedLabels.cargoItemTitle.replace(
13541
- "{index}",
13542
- (cargoIndex + 1).toString()
13543
- ) }),
13544
- _selectedLoadType && !cargo._isAccordionOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
13545
- /* @__PURE__ */ jsxs(Body1Strong, { style: { flex: 1 }, children: [
13546
- _selectedLoadType.name,
13547
- " \u2022",
13548
- " ",
13549
- watchQuantity,
13550
- "x",
13551
- " ",
13552
- _selectedLoadType.unit?.name,
13553
- " \u2022",
13554
- " ",
13555
- _selectedLoadType.formattedPrice
13556
- ] }),
13502
+ }
13503
+ )
13504
+ ] })
13505
+ ] }),
13506
+ hasLoad && /* @__PURE__ */ jsxs(Fragment, { children: [
13507
+ /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.cargoListTitle }) }) }),
13508
+ /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Col, { xs: 12, children: [
13509
+ /* @__PURE__ */ jsx(
13510
+ Accordion,
13511
+ {
13512
+ collapsible: true,
13513
+ defaultOpenItems: Array.from(defaultOpenCargoItems),
13514
+ onToggle: (e, data) => {
13515
+ const newOpenItems = new Set(
13516
+ data.openItems
13517
+ );
13518
+ setOpenCargoItems(newOpenItems);
13519
+ const updatedCargoItems = owner.cargoItems?.map(
13520
+ (cargo) => ({
13521
+ ...cargo,
13522
+ _isAccordionOpen: newOpenItems.has(
13523
+ `cargo-${cargo.id}`
13524
+ )
13525
+ })
13526
+ );
13527
+ onUpdateOwner(owner.id, {
13528
+ cargoItems: updatedCargoItems
13529
+ });
13530
+ },
13531
+ multiple: true,
13532
+ children: owner.cargoItems?.map((cargo, cargoIndex) => {
13533
+ const watchCommodity = watch(
13534
+ `owners.${ownerIndex}.cargo.${cargoIndex}.commodity`
13535
+ );
13536
+ const watchLoadType = watch(
13537
+ `owners.${ownerIndex}.cargo.${cargoIndex}.loadType`
13538
+ );
13539
+ const watchIndustryType = watch(
13540
+ `owners.${ownerIndex}.cargo.${cargoIndex}.industryType`
13541
+ );
13542
+ const watchQuantity = watch(
13543
+ `owners.${ownerIndex}.cargo.${cargoIndex}.quantity`
13544
+ );
13545
+ let _loadTypeOptions = [];
13546
+ if (watchCommodity && loadTypeOptionsByCommodityId[watchCommodity]) {
13547
+ _loadTypeOptions = loadTypeOptionsByCommodityId[watchCommodity];
13548
+ } else {
13549
+ _loadTypeOptions = loadTypeOptions.map(
13550
+ (lt) => ({
13551
+ value: lt.id.toString(),
13552
+ label: `${lt.name}${lt.unit?.name ? ` (${lt.unit.name})` : ""}`
13553
+ })
13554
+ );
13555
+ }
13556
+ const _selectedLoadType = loadTypes.find(
13557
+ (loadType) => loadType.id.toString() === watchLoadType
13558
+ );
13559
+ const isLoadTypeOther = _loadTypeOptions.find(
13560
+ (lt) => lt.value.toString() === String(watchLoadType)
13561
+ )?.label.startsWith(
13562
+ HARDCODED_NAME.LOAD_TYPE__LAINNYA
13563
+ );
13564
+ const isIndustryTypeOther = industryOptions?.find(
13565
+ (it) => it.value.toString() === String(watchIndustryType)
13566
+ )?.label === HARDCODED_NAME.INDUSTRY_TYPE__LAINNYA;
13567
+ return /* @__PURE__ */ jsxs(
13568
+ AccordionItem,
13569
+ {
13570
+ value: `cargo-${cargo.id}`,
13571
+ className: styles.accordion,
13572
+ children: [
13573
+ /* @__PURE__ */ jsx(
13574
+ AccordionHeader,
13575
+ {
13576
+ className: styles.accordionHeader,
13577
+ expandIconPosition: "end",
13578
+ children: /* @__PURE__ */ jsxs(
13579
+ "div",
13580
+ {
13581
+ style: {
13582
+ display: "flex",
13583
+ justifyContent: "space-between",
13584
+ alignItems: "center",
13585
+ width: "100%",
13586
+ gap: "1rem"
13587
+ },
13588
+ children: [
13557
13589
  /* @__PURE__ */ jsx(
13558
- Body1Stronger,
13590
+ Body1Strong,
13559
13591
  {
13560
- style: {
13561
- color: sharedColors["Shared_Secondary_Primary"],
13562
- minWidth: "fit-content"
13563
- },
13564
- children: new Intl.NumberFormat("id-ID", {
13565
- style: "currency",
13566
- currency: "IDR",
13567
- minimumFractionDigits: 0
13568
- }).format(
13569
- Number(
13570
- getValues(
13571
- `owners.${index}.cargo.${cargoIndex}.quantity`
13572
- ) || 0
13573
- ) * (_selectedLoadType.price || 0)
13592
+ style: { minWidth: "fit-content" },
13593
+ children: mergedLabels.cargoItemTitle.replace(
13594
+ "{index}",
13595
+ (cargoIndex + 1).toString()
13574
13596
  )
13575
13597
  }
13576
- )
13577
- ] })
13578
- ]
13579
- }
13580
- )
13581
- }
13582
- ),
13583
- /* @__PURE__ */ jsx(AccordionPanel, { children: /* @__PURE__ */ jsxs("div", { className: styles.form, children: [
13584
- /* @__PURE__ */ jsxs(Row, { children: [
13585
- /* @__PURE__ */ jsxs(Col, { md: isLoadTypeOther ? 4 : 6, children: [
13586
- /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13587
- mergedLabels.commodityLabel,
13588
- " ",
13589
- /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13590
- ] }),
13591
- /* @__PURE__ */ jsx(
13592
- InputDynamic_default,
13593
- {
13594
- control,
13595
- disabled,
13596
- name: `owners.${index}.cargo.${cargoIndex}.commodity`,
13597
- onChange: (val) => {
13598
- const name = `owners.${index}.cargo.${cargoIndex}.commodity`;
13599
- setValue(name, val);
13600
- const updatedCargoItems = owner.cargoItems?.map(
13601
- (c, cIdx) => cIdx === cargoIndex ? {
13602
- ...c,
13603
- commodity: val
13604
- } : c
13605
- );
13606
- onUpdateOwner(owner.id, {
13607
- cargoItems: updatedCargoItems
13608
- });
13609
- setValue(
13610
- `owners.${index}.cargo.${cargoIndex}.loadType`,
13611
- ""
13612
- );
13613
- },
13614
- options: commodityOptions,
13615
- placeholder: mergedLabels.selectPlaceholder,
13616
- required: true,
13617
- type: "select",
13618
- size: "large"
13598
+ ),
13599
+ _selectedLoadType && !cargo._isAccordionOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
13600
+ /* @__PURE__ */ jsxs(Body1Strong, { style: { flex: 1 }, children: [
13601
+ _selectedLoadType.name,
13602
+ " \u2022",
13603
+ " ",
13604
+ watchQuantity,
13605
+ "x",
13606
+ " ",
13607
+ _selectedLoadType.unit?.name,
13608
+ " \u2022",
13609
+ " ",
13610
+ _selectedLoadType.formattedPrice
13611
+ ] }),
13612
+ /* @__PURE__ */ jsx(
13613
+ Body1Stronger,
13614
+ {
13615
+ style: {
13616
+ color: sharedColors["Shared_Secondary_Primary"],
13617
+ minWidth: "fit-content"
13618
+ },
13619
+ children: new Intl.NumberFormat("id-ID", {
13620
+ style: "currency",
13621
+ currency: "IDR",
13622
+ minimumFractionDigits: 0
13623
+ }).format(
13624
+ Number(
13625
+ getValues(
13626
+ `owners.${ownerIndex}.cargo.${cargoIndex}.quantity`
13627
+ ) || 0
13628
+ ) * (_selectedLoadType.price || 0)
13629
+ ).replace("Rp", "IDR")
13630
+ }
13631
+ )
13632
+ ] })
13633
+ ]
13619
13634
  }
13620
13635
  )
13621
- ] }),
13622
- /* @__PURE__ */ jsxs(Col, { md: isLoadTypeOther ? 4 : 6, children: [
13623
- /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13624
- mergedLabels.loadTypeLabel,
13625
- " ",
13626
- /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13636
+ }
13637
+ ),
13638
+ /* @__PURE__ */ jsx(AccordionPanel, { children: /* @__PURE__ */ jsxs("div", { className: styles.form, children: [
13639
+ /* @__PURE__ */ jsxs(Row, { children: [
13640
+ /* @__PURE__ */ jsxs(Col, { md: isLoadTypeOther ? 4 : 6, children: [
13641
+ /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13642
+ mergedLabels.commodityLabel,
13643
+ " ",
13644
+ /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13645
+ ] }),
13646
+ /* @__PURE__ */ jsx(
13647
+ InputDynamic_default,
13648
+ {
13649
+ control,
13650
+ disabled,
13651
+ name: `owners.${ownerIndex}.cargo.${cargoIndex}.commodity`,
13652
+ onChange: (val) => {
13653
+ const name = `owners.${ownerIndex}.cargo.${cargoIndex}.commodity`;
13654
+ setValue(name, val);
13655
+ const updatedCargoItems = owner.cargoItems?.map(
13656
+ (c, cIdx) => cIdx === cargoIndex ? {
13657
+ ...c,
13658
+ commodity: val
13659
+ } : c
13660
+ );
13661
+ onUpdateOwner(owner.id, {
13662
+ cargoItems: updatedCargoItems
13663
+ });
13664
+ setValue(
13665
+ `owners.${ownerIndex}.cargo.${cargoIndex}.loadType`,
13666
+ ""
13667
+ );
13668
+ },
13669
+ options: commodityOptions,
13670
+ placeholder: mergedLabels.selectPlaceholder,
13671
+ required: true,
13672
+ type: "select",
13673
+ size: "large"
13674
+ }
13675
+ )
13627
13676
  ] }),
13628
- /* @__PURE__ */ jsx(
13629
- InputDynamic_default,
13630
- {
13631
- control,
13632
- disabled: disabled || (getValues(
13633
- `owners.${index}.cargo.${cargoIndex}.commodity`
13634
- ) || "") === "",
13635
- name: `owners.${index}.cargo.${cargoIndex}.loadType`,
13636
- onChange: (val) => {
13637
- const name = `owners.${index}.cargo.${cargoIndex}.loadType`;
13638
- setValue(name, val);
13639
- const updatedCargoItems = owner.cargoItems?.map(
13640
- (c, cIdx) => cIdx === cargoIndex ? {
13641
- ...c,
13642
- loadType: val
13643
- } : c
13644
- );
13645
- onUpdateOwner(owner.id, {
13646
- cargoItems: updatedCargoItems
13647
- });
13648
- },
13649
- options: _loadTypeOptions,
13650
- placeholder: mergedLabels.selectPlaceholder,
13651
- required: true,
13652
- size: "large",
13653
- type: "select"
13654
- }
13655
- ),
13656
- /* @__PURE__ */ jsx(
13657
- Caption1,
13658
- {
13659
- style: {
13660
- color: tokens.colorNeutralForeground3,
13661
- marginTop: "0.25rem"
13662
- },
13663
- children: mergedLabels.loadTypeHelperText
13664
- }
13665
- )
13677
+ /* @__PURE__ */ jsxs(Col, { md: isLoadTypeOther ? 4 : 6, children: [
13678
+ /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13679
+ mergedLabels.loadTypeLabel,
13680
+ " ",
13681
+ /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13682
+ ] }),
13683
+ /* @__PURE__ */ jsx(
13684
+ InputDynamic_default,
13685
+ {
13686
+ control,
13687
+ disabled: disabled || (getValues(
13688
+ `owners.${ownerIndex}.cargo.${cargoIndex}.commodity`
13689
+ ) || "") === "",
13690
+ name: `owners.${ownerIndex}.cargo.${cargoIndex}.loadType`,
13691
+ onChange: (val) => {
13692
+ const name = `owners.${ownerIndex}.cargo.${cargoIndex}.loadType`;
13693
+ setValue(name, val);
13694
+ const updatedCargoItems = owner.cargoItems?.map(
13695
+ (c, cIdx) => cIdx === cargoIndex ? {
13696
+ ...c,
13697
+ loadType: val
13698
+ } : c
13699
+ );
13700
+ onUpdateOwner(owner.id, {
13701
+ cargoItems: updatedCargoItems
13702
+ });
13703
+ },
13704
+ options: _loadTypeOptions,
13705
+ placeholder: mergedLabels.selectPlaceholder,
13706
+ required: true,
13707
+ size: "large",
13708
+ type: "select"
13709
+ }
13710
+ ),
13711
+ /* @__PURE__ */ jsx(
13712
+ Caption1,
13713
+ {
13714
+ style: {
13715
+ color: tokens.colorNeutralForeground3,
13716
+ marginTop: "0.25rem"
13717
+ },
13718
+ children: mergedLabels.loadTypeHelperText
13719
+ }
13720
+ )
13721
+ ] }),
13722
+ isLoadTypeOther && /* @__PURE__ */ jsxs(Col, { xl: 4, children: [
13723
+ /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13724
+ mergedLabels.loadTypeOthersLabel,
13725
+ " ",
13726
+ /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13727
+ ] }),
13728
+ /* @__PURE__ */ jsx(
13729
+ InputDynamic_default,
13730
+ {
13731
+ control,
13732
+ disabled,
13733
+ name: `owners.${ownerIndex}.cargo.${cargoIndex}.loadTypeOther`,
13734
+ placeholder: mergedLabels.loadTypeOthersPlaceholder,
13735
+ required: true,
13736
+ size: "large",
13737
+ type: "text",
13738
+ onChange: (val) => {
13739
+ setValue(
13740
+ `owners.${ownerIndex}.cargo.${cargoIndex}.loadTypeOther`,
13741
+ val
13742
+ );
13743
+ const updatedCargoItems = owner.cargoItems?.map(
13744
+ (c, cIdx) => cIdx === cargoIndex ? {
13745
+ ...c,
13746
+ loadTypeOther: val
13747
+ } : c
13748
+ );
13749
+ onUpdateOwner(owner.id, {
13750
+ cargoItems: updatedCargoItems
13751
+ });
13752
+ }
13753
+ }
13754
+ )
13755
+ ] })
13666
13756
  ] }),
13667
- isLoadTypeOther && /* @__PURE__ */ jsxs(Col, { xl: 4, children: [
13668
- /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13669
- mergedLabels.loadTypeOthersLabel,
13670
- " ",
13671
- /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13757
+ /* @__PURE__ */ jsxs(Row, { children: [
13758
+ /* @__PURE__ */ jsxs(Col, { md: isIndustryTypeOther ? 4 : 6, children: [
13759
+ /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13760
+ mergedLabels.industryTypeLabel,
13761
+ " ",
13762
+ /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13763
+ ] }),
13764
+ /* @__PURE__ */ jsx(
13765
+ InputDynamic_default,
13766
+ {
13767
+ control,
13768
+ disabled,
13769
+ name: `owners.${ownerIndex}.cargo.${cargoIndex}.industryType`,
13770
+ options: industryOptions,
13771
+ onChange: (val) => {
13772
+ const name = `owners.${ownerIndex}.cargo.${cargoIndex}.industryType`;
13773
+ setValue(name, val);
13774
+ const updatedCargoItems = owner.cargoItems?.map(
13775
+ (c, cIdx) => cIdx === cargoIndex ? {
13776
+ ...c,
13777
+ industryType: val
13778
+ } : c
13779
+ );
13780
+ onUpdateOwner(owner.id, {
13781
+ cargoItems: updatedCargoItems
13782
+ });
13783
+ },
13784
+ placeholder: mergedLabels.selectPlaceholder,
13785
+ required: true,
13786
+ size: "large",
13787
+ type: "select"
13788
+ }
13789
+ ),
13790
+ /* @__PURE__ */ jsx(
13791
+ Caption1,
13792
+ {
13793
+ style: {
13794
+ color: tokens.colorNeutralForeground3,
13795
+ marginTop: "0.25rem"
13796
+ },
13797
+ children: mergedLabels.industryTypeHelperText
13798
+ }
13799
+ )
13672
13800
  ] }),
13673
- /* @__PURE__ */ jsx(
13674
- InputDynamic_default,
13675
- {
13676
- control,
13677
- disabled,
13678
- name: `owners.${index}.cargo.${cargoIndex}.loadTypeOther`,
13679
- placeholder: mergedLabels.loadTypeOthersPlaceholder,
13680
- required: true,
13681
- size: "large",
13682
- type: "text",
13683
- onChange: (val) => {
13684
- setValue(
13685
- `owners.${index}.cargo.${cargoIndex}.loadTypeOther`,
13686
- val
13687
- );
13688
- const updatedCargoItems = owner.cargoItems?.map(
13689
- (c, cIdx) => cIdx === cargoIndex ? {
13690
- ...c,
13691
- loadTypeOther: val
13692
- } : c
13693
- );
13694
- onUpdateOwner(owner.id, {
13695
- cargoItems: updatedCargoItems
13696
- });
13801
+ isIndustryTypeOther && /* @__PURE__ */ jsxs(Col, { xl: 4, children: [
13802
+ /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13803
+ mergedLabels.industryTypeOthersLabel,
13804
+ " ",
13805
+ /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13806
+ ] }),
13807
+ /* @__PURE__ */ jsx(
13808
+ InputDynamic_default,
13809
+ {
13810
+ control,
13811
+ disabled,
13812
+ name: `owners.${ownerIndex}.cargo.${cargoIndex}.industryTypeOther`,
13813
+ placeholder: mergedLabels.industryTypeOthersPlaceholder,
13814
+ required: true,
13815
+ size: "large",
13816
+ type: "text",
13817
+ onChange: (val) => {
13818
+ setValue(
13819
+ `owners.${ownerIndex}.cargo.${cargoIndex}.industryTypeOther`,
13820
+ val
13821
+ );
13822
+ const updatedCargoItems = owner.cargoItems?.map(
13823
+ (c, cIdx) => cIdx === cargoIndex ? {
13824
+ ...c,
13825
+ industryTypeOther: val
13826
+ } : c
13827
+ );
13828
+ onUpdateOwner(owner.id, {
13829
+ cargoItems: updatedCargoItems
13830
+ });
13831
+ }
13697
13832
  }
13698
- }
13699
- )
13700
- ] })
13701
- ] }),
13702
- /* @__PURE__ */ jsxs(Row, { children: [
13703
- /* @__PURE__ */ jsxs(Col, { md: isIndustryTypeOther ? 4 : 6, children: [
13704
- /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13705
- mergedLabels.industryTypeLabel,
13706
- " ",
13707
- /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13833
+ )
13708
13834
  ] }),
13709
- /* @__PURE__ */ jsx(
13710
- InputDynamic_default,
13711
- {
13712
- control,
13713
- disabled,
13714
- name: `owners.${index}.cargo.${cargoIndex}.industryType`,
13715
- options: industryOptions,
13716
- onChange: (val) => {
13717
- const name = `owners.${index}.cargo.${cargoIndex}.industryType`;
13718
- setValue(name, val);
13719
- const updatedCargoItems = owner.cargoItems?.map(
13720
- (c, cIdx) => cIdx === cargoIndex ? {
13721
- ...c,
13722
- industryType: val
13723
- } : c
13724
- );
13725
- onUpdateOwner(owner.id, {
13726
- cargoItems: updatedCargoItems
13727
- });
13728
- },
13729
- placeholder: mergedLabels.selectPlaceholder,
13730
- required: true,
13731
- size: "large",
13732
- type: "select"
13733
- }
13734
- ),
13735
- /* @__PURE__ */ jsx(
13736
- Caption1,
13737
- {
13738
- style: {
13739
- color: tokens.colorNeutralForeground3,
13740
- marginTop: "0.25rem"
13741
- },
13742
- children: mergedLabels.industryTypeHelperText
13743
- }
13744
- )
13835
+ /* @__PURE__ */ jsxs(Col, { md: isIndustryTypeOther ? 4 : 6, children: [
13836
+ /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13837
+ mergedLabels.cargoCategoryLabel,
13838
+ " ",
13839
+ /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13840
+ ] }),
13841
+ /* @__PURE__ */ jsx(
13842
+ InputDynamic_default,
13843
+ {
13844
+ control,
13845
+ disabled,
13846
+ name: `owners.${ownerIndex}.cargo.${cargoIndex}.cargoCategory`,
13847
+ options: loadCategoryOptions,
13848
+ onChange: (val) => {
13849
+ const name = `owners.${ownerIndex}.cargo.${cargoIndex}.cargoCategory`;
13850
+ setValue(name, val);
13851
+ const updatedCargoItems = owner.cargoItems?.map(
13852
+ (c, cIdx) => cIdx === cargoIndex ? {
13853
+ ...c,
13854
+ cargoCategory: val
13855
+ } : c
13856
+ );
13857
+ onUpdateOwner(owner.id, {
13858
+ cargoItems: updatedCargoItems
13859
+ });
13860
+ },
13861
+ placeholder: mergedLabels.selectPlaceholder,
13862
+ required: true,
13863
+ size: "large",
13864
+ type: "select"
13865
+ }
13866
+ )
13867
+ ] })
13745
13868
  ] }),
13746
- isIndustryTypeOther && /* @__PURE__ */ jsxs(Col, { xl: 4, children: [
13747
- /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13748
- mergedLabels.industryTypeOthersLabel,
13749
- " ",
13750
- /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13751
- ] }),
13752
- /* @__PURE__ */ jsx(
13869
+ /* @__PURE__ */ jsxs(Row, { children: [
13870
+ /* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.cargoLabel }) }),
13871
+ /* @__PURE__ */ jsx(Col, { md: 12, children: /* @__PURE__ */ jsx(
13753
13872
  InputDynamic_default,
13754
13873
  {
13755
13874
  control,
13756
13875
  disabled,
13757
- name: `owners.${index}.cargo.${cargoIndex}.industryTypeOther`,
13758
- placeholder: mergedLabels.industryTypeOthersPlaceholder,
13759
- required: true,
13876
+ name: `owners.${ownerIndex}.cargo.${cargoIndex}.cargoWeight`,
13877
+ placeholder: mergedLabels.cargoWeightPlaceholder,
13760
13878
  size: "large",
13761
- type: "text",
13879
+ type: "number",
13880
+ step: "1",
13762
13881
  onChange: (val) => {
13763
13882
  setValue(
13764
- `owners.${index}.cargo.${cargoIndex}.industryTypeOther`,
13765
- val
13883
+ `owners.${ownerIndex}.cargo.${cargoIndex}.cargoWeight`,
13884
+ val ? Number(val) : 0
13766
13885
  );
13767
13886
  const updatedCargoItems = owner.cargoItems?.map(
13768
13887
  (c, cIdx) => cIdx === cargoIndex ? {
13769
13888
  ...c,
13770
- industryTypeOther: val
13771
- } : c
13772
- );
13773
- onUpdateOwner(owner.id, {
13774
- cargoItems: updatedCargoItems
13775
- });
13776
- }
13777
- }
13778
- )
13779
- ] }),
13780
- /* @__PURE__ */ jsxs(Col, { md: isIndustryTypeOther ? 4 : 6, children: [
13781
- /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
13782
- mergedLabels.cargoCategoryLabel,
13783
- " ",
13784
- /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
13785
- ] }),
13786
- /* @__PURE__ */ jsx(
13787
- InputDynamic_default,
13788
- {
13789
- control,
13790
- disabled,
13791
- name: `owners.${index}.cargo.${cargoIndex}.cargoCategory`,
13792
- options: loadCategoryOptions,
13793
- onChange: (val) => {
13794
- const name = `owners.${index}.cargo.${cargoIndex}.cargoCategory`;
13795
- setValue(name, val);
13796
- const updatedCargoItems = owner.cargoItems?.map(
13797
- (c, cIdx) => cIdx === cargoIndex ? {
13798
- ...c,
13799
- cargoCategory: val
13889
+ cargoWeight: val ? Number(val) : 0
13800
13890
  } : c
13801
13891
  );
13802
13892
  onUpdateOwner(owner.id, {
13803
13893
  cargoItems: updatedCargoItems
13804
13894
  });
13805
13895
  },
13806
- placeholder: mergedLabels.selectPlaceholder,
13807
- required: true,
13808
- size: "large",
13809
- type: "select"
13896
+ contentAfter: /* @__PURE__ */ jsx(
13897
+ "div",
13898
+ {
13899
+ style: {
13900
+ paddingRight: "12px",
13901
+ color: tokens.colorNeutralForeground1,
13902
+ fontSize: tokens.fontSizeBase300
13903
+ },
13904
+ children: "Ton"
13905
+ }
13906
+ )
13810
13907
  }
13811
- )
13812
- ] })
13813
- ] }),
13814
- /* @__PURE__ */ jsxs(Row, { children: [
13815
- /* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.estimatedLooseCargoLabel }) }),
13816
- /* @__PURE__ */ jsx(Col, { md: 12, children: /* @__PURE__ */ jsx(
13817
- InputDynamic_default,
13818
- {
13819
- control,
13820
- disabled,
13821
- name: `owners.${index}.cargo.${cargoIndex}.cargoWeight`,
13822
- placeholder: mergedLabels.estimatedLooseCargoWeightPlaceholder,
13823
- size: "large",
13824
- type: "number",
13825
- step: "1",
13826
- onChange: (val) => {
13827
- setValue(
13828
- `owners.${index}.cargo.${cargoIndex}.cargoWeight`,
13829
- val ? Number(val) : 0
13830
- );
13831
- const updatedCargoItems = owner.cargoItems?.map(
13832
- (c, cIdx) => cIdx === cargoIndex ? {
13833
- ...c,
13834
- estimatedLooseCargoWeight: val ? Number(val) : 0
13835
- } : c
13836
- );
13837
- onUpdateOwner(owner.id, {
13838
- cargoItems: updatedCargoItems
13839
- });
13840
- },
13841
- contentAfter: /* @__PURE__ */ jsx(
13842
- "div",
13843
- {
13844
- style: {
13845
- paddingRight: "12px",
13846
- color: tokens.colorNeutralForeground1,
13847
- fontSize: tokens.fontSizeBase300
13848
- },
13849
- children: "Ton"
13850
- }
13851
- )
13852
- }
13853
- ) })
13854
- ] }),
13855
- (() => {
13856
- if (!_selectedLoadType) return null;
13857
- return /* @__PURE__ */ jsxs(Row, { children: [
13858
- /* @__PURE__ */ jsxs(Col, { md: 12, children: [
13859
- /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.cargoQuantityLabel }),
13860
- /* @__PURE__ */ jsxs(
13861
- "div",
13862
- {
13863
- style: {
13864
- display: "flex",
13865
- alignItems: "center",
13866
- border: `1px solid ${tokens.colorNeutralStroke1}`,
13867
- borderRadius: tokens.borderRadiusMedium,
13868
- height: "40px",
13869
- padding: "0 12px",
13870
- backgroundColor: tokens.colorNeutralBackground1
13871
- },
13872
- children: [
13873
- /* @__PURE__ */ jsx("div", { style: { flex: 0.5 } }),
13874
- /* @__PURE__ */ jsxs(
13875
- "div",
13876
- {
13877
- style: {
13878
- display: "flex",
13879
- alignItems: "center",
13880
- gap: "12px"
13881
- },
13882
- children: [
13883
- /* @__PURE__ */ jsx(
13884
- Button,
13885
- {
13886
- appearance: "transparent",
13887
- disabled,
13888
- icon: /* @__PURE__ */ jsx(
13889
- Icon,
13890
- {
13891
- icon: "fluent:subtract-circle-24-regular",
13892
- style: {
13893
- fontSize: "24px",
13894
- color: tokens.colorNeutralForeground4
13895
- }
13896
- }
13897
- ),
13898
- "aria-label": mergedLabels.decrementQuantityAriaLabel,
13899
- size: "small",
13900
- onClick: () => {
13901
- const currentVal = getValues(
13902
- `owners.${index}.cargo.${cargoIndex}.quantity`
13903
- ) || 0;
13904
- const currentQty = Number(currentVal);
13905
- if (currentQty > 1) {
13906
- const newVal = currentQty - 1;
13907
- setValue(
13908
- `owners.${index}.cargo.${cargoIndex}.quantity`,
13909
- newVal
13910
- );
13911
- onUpdateCargoQuantity(
13912
- owner.id,
13913
- cargo.id,
13914
- newVal
13915
- );
13916
- }
13917
- },
13918
- style: {
13919
- minWidth: "32px",
13920
- padding: "0"
13921
- }
13922
- }
13923
- ),
13924
- /* @__PURE__ */ jsx("div", { style: { width: "40px" }, children: /* @__PURE__ */ jsx(
13925
- Controller,
13926
- {
13927
- name: `owners.${index}.cargo.${cargoIndex}.quantity`,
13928
- control,
13929
- disabled,
13930
- render: ({ field }) => /* @__PURE__ */ jsx(
13931
- "input",
13932
- {
13933
- ...field,
13934
- min: 1,
13935
- step: "1",
13936
- type: "number",
13937
- style: {
13938
- border: "none",
13939
- width: "100%",
13940
- textAlign: "center",
13941
- outline: "none",
13942
- backgroundColor: "transparent",
13943
- color: tokens.colorNeutralForeground1,
13944
- fontSize: tokens.fontSizeBase400,
13945
- fontFamily: tokens.fontFamilyBase
13946
- },
13947
- onKeyDown: (e) => {
13948
- if ([
13949
- "e",
13950
- "E",
13951
- "+",
13952
- "-",
13953
- ".",
13954
- ","
13955
- ].includes(e.key)) {
13956
- e.preventDefault();
13957
- }
13958
- },
13959
- onPaste: (e) => {
13960
- const paste = e.clipboardData.getData(
13961
- "text"
13962
- );
13963
- if (!/^\d+$/.test(paste)) {
13964
- e.preventDefault();
13908
+ ) })
13909
+ ] }),
13910
+ (() => {
13911
+ if (!_selectedLoadType) return null;
13912
+ return /* @__PURE__ */ jsxs(Row, { children: [
13913
+ /* @__PURE__ */ jsxs(Col, { md: 12, children: [
13914
+ /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.cargoQuantityLabel }),
13915
+ /* @__PURE__ */ jsxs(
13916
+ "div",
13917
+ {
13918
+ style: {
13919
+ display: "flex",
13920
+ alignItems: "center",
13921
+ border: `1px solid ${tokens.colorNeutralStroke1}`,
13922
+ borderRadius: tokens.borderRadiusMedium,
13923
+ height: "40px",
13924
+ padding: "0 12px",
13925
+ backgroundColor: tokens.colorNeutralBackground1
13926
+ },
13927
+ children: [
13928
+ /* @__PURE__ */ jsx("div", { style: { flex: 0.5 } }),
13929
+ /* @__PURE__ */ jsxs(
13930
+ "div",
13931
+ {
13932
+ style: {
13933
+ display: "flex",
13934
+ alignItems: "center",
13935
+ gap: "12px"
13936
+ },
13937
+ children: [
13938
+ /* @__PURE__ */ jsx(
13939
+ Button,
13940
+ {
13941
+ appearance: "transparent",
13942
+ disabled,
13943
+ icon: /* @__PURE__ */ jsx(
13944
+ Icon,
13945
+ {
13946
+ icon: "fluent:subtract-circle-24-regular",
13947
+ style: {
13948
+ fontSize: "24px",
13949
+ color: tokens.colorNeutralForeground4
13965
13950
  }
13966
- },
13967
- onWheel: (e) => e.target.blur(),
13968
- onChange: (e) => {
13969
- const newVal = Number(
13970
- e.target.value
13951
+ }
13952
+ ),
13953
+ "aria-label": mergedLabels.decrementQuantityAriaLabel,
13954
+ size: "small",
13955
+ onClick: () => {
13956
+ const currentVal = getValues(
13957
+ `owners.${ownerIndex}.cargo.${cargoIndex}.quantity`
13958
+ ) || 0;
13959
+ const currentQty = Number(currentVal);
13960
+ if (currentQty > 1) {
13961
+ const newVal = currentQty - 1;
13962
+ setValue(
13963
+ `owners.${ownerIndex}.cargo.${cargoIndex}.quantity`,
13964
+ newVal
13971
13965
  );
13972
- field.onChange(e);
13973
13966
  onUpdateCargoQuantity(
13974
13967
  owner.id,
13975
13968
  cargo.id,
13976
13969
  newVal
13977
13970
  );
13978
13971
  }
13972
+ },
13973
+ style: {
13974
+ minWidth: "32px",
13975
+ padding: "0"
13979
13976
  }
13980
- ),
13981
- rules: {
13982
- required: true,
13983
- validate: (val) => Number(val) > 0
13984
13977
  }
13985
- }
13986
- ) }),
13987
- /* @__PURE__ */ jsx(
13988
- Button,
13989
- {
13990
- appearance: "transparent",
13991
- disabled,
13992
- icon: /* @__PURE__ */ jsx(
13993
- Icon,
13994
- {
13995
- icon: "fluent:add-circle-24-regular",
13996
- style: {
13997
- fontSize: "24px",
13998
- color: tokens.colorBrandStroke1
13978
+ ),
13979
+ /* @__PURE__ */ jsx(
13980
+ "div",
13981
+ {
13982
+ style: { width: "40px" },
13983
+ children: /* @__PURE__ */ jsx(
13984
+ Controller,
13985
+ {
13986
+ name: `owners.${ownerIndex}.cargo.${cargoIndex}.quantity`,
13987
+ control,
13988
+ disabled,
13989
+ render: ({ field }) => /* @__PURE__ */ jsx(
13990
+ "input",
13991
+ {
13992
+ ...field,
13993
+ min: 1,
13994
+ step: "1",
13995
+ type: "number",
13996
+ style: {
13997
+ border: "none",
13998
+ width: "100%",
13999
+ textAlign: "center",
14000
+ outline: "none",
14001
+ backgroundColor: "transparent",
14002
+ color: tokens.colorNeutralForeground1,
14003
+ fontSize: tokens.fontSizeBase400,
14004
+ fontFamily: tokens.fontFamilyBase
14005
+ },
14006
+ onKeyDown: (e) => {
14007
+ if ([
14008
+ "e",
14009
+ "E",
14010
+ "+",
14011
+ "-",
14012
+ ".",
14013
+ ","
14014
+ ].includes(e.key)) {
14015
+ e.preventDefault();
14016
+ }
14017
+ },
14018
+ onPaste: (e) => {
14019
+ const paste = e.clipboardData.getData(
14020
+ "text"
14021
+ );
14022
+ if (!/^\d+$/.test(
14023
+ paste
14024
+ )) {
14025
+ e.preventDefault();
14026
+ }
14027
+ },
14028
+ onWheel: (e) => e.target.blur(),
14029
+ onChange: (e) => {
14030
+ const newVal = Number(
14031
+ e.target.value
14032
+ );
14033
+ field.onChange(e);
14034
+ onUpdateCargoQuantity(
14035
+ owner.id,
14036
+ cargo.id,
14037
+ newVal
14038
+ );
14039
+ }
14040
+ }
14041
+ ),
14042
+ rules: {
14043
+ required: true,
14044
+ validate: (val) => Number(val) > 0
14045
+ }
13999
14046
  }
14047
+ )
14048
+ }
14049
+ ),
14050
+ /* @__PURE__ */ jsx(
14051
+ Button,
14052
+ {
14053
+ appearance: "transparent",
14054
+ disabled,
14055
+ icon: /* @__PURE__ */ jsx(
14056
+ Icon,
14057
+ {
14058
+ icon: "fluent:add-circle-24-regular",
14059
+ style: {
14060
+ fontSize: "24px",
14061
+ color: tokens.colorBrandStroke1
14062
+ }
14063
+ }
14064
+ ),
14065
+ "aria-label": mergedLabels.incrementQuantityAriaLabel,
14066
+ size: "small",
14067
+ onClick: () => {
14068
+ const currentVal = getValues(
14069
+ `owners.${ownerIndex}.cargo.${cargoIndex}.quantity`
14070
+ ) || 0;
14071
+ const currentQty = Number(currentVal);
14072
+ const newVal = currentQty + 1;
14073
+ setValue(
14074
+ `owners.${ownerIndex}.cargo.${cargoIndex}.quantity`,
14075
+ newVal
14076
+ );
14077
+ onUpdateCargoQuantity(
14078
+ owner.id,
14079
+ cargo.id,
14080
+ newVal
14081
+ );
14082
+ },
14083
+ style: {
14084
+ minWidth: "32px",
14085
+ padding: "0"
14000
14086
  }
14001
- ),
14002
- "aria-label": mergedLabels.incrementQuantityAriaLabel,
14003
- size: "small",
14004
- onClick: () => {
14005
- const currentVal = getValues(
14006
- `owners.${index}.cargo.${cargoIndex}.quantity`
14007
- ) || 0;
14008
- const currentQty = Number(currentVal);
14009
- const newVal = currentQty + 1;
14010
- setValue(
14011
- `owners.${index}.cargo.${cargoIndex}.quantity`,
14012
- newVal
14013
- );
14014
- onUpdateCargoQuantity(
14015
- owner.id,
14016
- cargo.id,
14017
- newVal
14018
- );
14019
- },
14020
- style: {
14021
- minWidth: "32px",
14022
- padding: "0"
14023
14087
  }
14088
+ )
14089
+ ]
14090
+ }
14091
+ ),
14092
+ /* @__PURE__ */ jsx(
14093
+ "div",
14094
+ {
14095
+ style: {
14096
+ flex: 1,
14097
+ textAlign: "left",
14098
+ color: tokens.colorNeutralForeground1,
14099
+ fontSize: tokens.fontSizeBase300,
14100
+ paddingRight: "8px"
14101
+ },
14102
+ children: (() => {
14103
+ const selectedLoadType2 = loadTypes.find(
14104
+ (loadType) => loadType.id.toString() === watchLoadType
14105
+ );
14106
+ return selectedLoadType2?.unit?.name;
14107
+ })()
14108
+ }
14109
+ )
14110
+ ]
14111
+ }
14112
+ )
14113
+ ] }),
14114
+ /* @__PURE__ */ jsxs(Col, { md: 12, children: [
14115
+ /* @__PURE__ */ jsx("div", { style: { flex: 0.5 } }),
14116
+ /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.priceLabel }),
14117
+ /* @__PURE__ */ jsx(
14118
+ Body2,
14119
+ {
14120
+ style: { marginTop: "0.5rem" },
14121
+ children: /* @__PURE__ */ jsxs(Row, { children: [
14122
+ /* @__PURE__ */ jsx(Col, { xl: 6, children: /* @__PURE__ */ jsxs(Body1Strong, { children: [
14123
+ _selectedLoadType.name,
14124
+ " \u2022",
14125
+ " ",
14126
+ watchQuantity,
14127
+ "x",
14128
+ " ",
14129
+ _selectedLoadType.unit?.name,
14130
+ " ",
14131
+ "\u2022",
14132
+ " ",
14133
+ _selectedLoadType.formattedPrice
14134
+ ] }) }),
14135
+ /* @__PURE__ */ jsx(
14136
+ Col,
14137
+ {
14138
+ xl: 6,
14139
+ style: {
14140
+ color: sharedColors["Shared_Secondary_Primary"],
14141
+ textAlign: "right"
14142
+ },
14143
+ children: /* @__PURE__ */ jsx(Body1Stronger, { children: new Intl.NumberFormat(
14144
+ "id-ID",
14145
+ {
14146
+ style: "currency",
14147
+ currency: "IDR",
14148
+ minimumFractionDigits: 0
14024
14149
  }
14025
- )
14026
- ]
14027
- }
14028
- ),
14029
- /* @__PURE__ */ jsx(
14030
- "div",
14031
- {
14032
- style: {
14033
- flex: 1,
14034
- textAlign: "left",
14035
- color: tokens.colorNeutralForeground1,
14036
- fontSize: tokens.fontSizeBase300,
14037
- paddingRight: "8px"
14038
- },
14039
- children: (() => {
14040
- const type = watch(
14041
- `owners.${index}.cargo.${cargoIndex}.loadType`
14042
- );
14043
- const selectedLoadType2 = loadTypes.find(
14044
- (loadType) => loadType.id.toString() === type
14045
- );
14046
- return selectedLoadType2?.unit?.name;
14047
- })()
14048
- }
14049
- )
14050
- ]
14051
- }
14052
- )
14053
- ] }),
14054
- /* @__PURE__ */ jsxs(Col, { md: 12, children: [
14055
- /* @__PURE__ */ jsx("div", { style: { flex: 0.5 } }),
14056
- /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.priceLabel }),
14057
- /* @__PURE__ */ jsx(
14058
- Body2,
14059
- {
14060
- style: { marginTop: "0.5rem" },
14061
- children: /* @__PURE__ */ jsxs(Row, { children: [
14062
- /* @__PURE__ */ jsx(Col, { xl: 6, children: /* @__PURE__ */ jsxs(Body1Strong, { children: [
14063
- _selectedLoadType.name,
14064
- " \u2022",
14065
- " ",
14066
- watchQuantity,
14067
- "x",
14068
- " ",
14069
- _selectedLoadType.unit?.name,
14070
- " ",
14071
- "\u2022",
14072
- " ",
14073
- _selectedLoadType.formattedPrice
14074
- ] }) }),
14075
- /* @__PURE__ */ jsx(
14076
- Col,
14077
- {
14078
- xl: 6,
14079
- style: {
14080
- color: sharedColors["Shared_Secondary_Primary"],
14081
- textAlign: "right"
14082
- },
14083
- children: /* @__PURE__ */ jsx(Body1Stronger, { children: new Intl.NumberFormat(
14084
- "id-ID",
14085
- {
14086
- style: "currency",
14087
- currency: "IDR",
14088
- minimumFractionDigits: 0
14089
- }
14090
- ).format(
14091
- Number(
14092
- getValues(
14093
- `owners.${index}.cargo.${cargoIndex}.quantity`
14094
- ) || 0
14095
- ) * (_selectedLoadType.price || 0)
14096
- ) })
14097
- }
14098
- )
14099
- ] })
14100
- }
14101
- )
14102
- ] })
14103
- ] });
14104
- })(),
14105
- /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Col, { children: (owner.cargoItems?.length || 0) > 1 && /* @__PURE__ */ jsx(
14106
- Button,
14107
- {
14108
- disabled,
14109
- icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:delete-24-regular" }),
14110
- onClick: (e) => {
14111
- e.stopPropagation();
14112
- onDeleteCargo(owner.id, cargo.id);
14113
- },
14114
- onKeyDown: (e) => {
14115
- if (e.key === "Enter" || e.key === " ") {
14150
+ ).format(
14151
+ Number(
14152
+ getValues(
14153
+ `owners.${ownerIndex}.cargo.${cargoIndex}.quantity`
14154
+ ) || 0
14155
+ ) * (_selectedLoadType.price || 0)
14156
+ ).replace("Rp", "IDR") })
14157
+ }
14158
+ )
14159
+ ] })
14160
+ }
14161
+ )
14162
+ ] })
14163
+ ] });
14164
+ })(),
14165
+ /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Col, { children: (owner.cargoItems?.length || 0) > 1 && /* @__PURE__ */ jsx(
14166
+ Button,
14167
+ {
14168
+ disabled,
14169
+ icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:delete-24-regular" }),
14170
+ onClick: (e) => {
14116
14171
  e.stopPropagation();
14117
14172
  onDeleteCargo(
14118
14173
  owner.id,
14119
14174
  cargo.id
14120
14175
  );
14121
- }
14122
- },
14123
- size: "medium",
14124
- shape: "circular",
14125
- style: {
14126
- border: `1px solid ${tokens.colorPaletteRedForeground1}`,
14127
- color: tokens.colorPaletteRedForeground1,
14128
- width: "100%"
14129
- },
14130
- children: mergedLabels.deleteCargoButton
14131
- }
14132
- ) }) })
14133
- ] }) })
14134
- ]
14135
- },
14136
- cargo.id
14137
- );
14138
- })
14139
- }
14140
- ),
14141
- /* @__PURE__ */ jsx(
14142
- Button,
14143
- {
14144
- appearance: "secondary",
14145
- icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:add-24-regular" }),
14146
- shape: "circular",
14147
- style: {
14148
- borderColor: tokens.colorBrandStroke1,
14149
- color: tokens.colorBrandBackground,
14150
- marginTop: "1rem",
14151
- width: "100%"
14152
- },
14153
- onClick: () => onAddCargo(owner.id),
14154
- children: mergedLabels.addCargoButton
14155
- }
14156
- )
14157
- ] }) })
14158
- ] })
14159
- ] }) })
14160
- ]
14161
- },
14162
- owner.id
14163
- ))
14176
+ },
14177
+ onKeyDown: (e) => {
14178
+ if (e.key === "Enter" || e.key === " ") {
14179
+ e.stopPropagation();
14180
+ onDeleteCargo(
14181
+ owner.id,
14182
+ cargo.id
14183
+ );
14184
+ }
14185
+ },
14186
+ size: "medium",
14187
+ shape: "circular",
14188
+ style: {
14189
+ border: `1px solid ${tokens.colorPaletteRedForeground1}`,
14190
+ color: tokens.colorPaletteRedForeground1,
14191
+ width: "100%"
14192
+ },
14193
+ children: mergedLabels.deleteCargoButton
14194
+ }
14195
+ ) }) })
14196
+ ] }) })
14197
+ ]
14198
+ },
14199
+ cargo.id
14200
+ );
14201
+ })
14202
+ }
14203
+ ),
14204
+ /* @__PURE__ */ jsx(
14205
+ Button,
14206
+ {
14207
+ appearance: "secondary",
14208
+ icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:add-24-regular" }),
14209
+ shape: "circular",
14210
+ style: {
14211
+ borderColor: tokens.colorBrandStroke1,
14212
+ color: tokens.colorBrandBackground,
14213
+ marginTop: "1rem",
14214
+ width: "100%"
14215
+ },
14216
+ onClick: () => onAddCargo(owner.id),
14217
+ children: mergedLabels.addCargoButton
14218
+ }
14219
+ )
14220
+ ] }) })
14221
+ ] })
14222
+ ] }) })
14223
+ ]
14224
+ },
14225
+ owner.id
14226
+ )
14227
+ ] }, owner.id))
14164
14228
  }
14165
14229
  )
14166
14230
  ] });