@asdp/ferryui 0.1.22-dev.8491 → 0.1.22-dev.8560

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 +562 -12
  2. package/dist/index.d.ts +562 -12
  3. package/dist/index.js +2809 -0
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +2796 -2
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -12,6 +12,7 @@ var Select = require('react-select');
12
12
  var reactCalendarCompat = require('@fluentui/react-calendar-compat');
13
13
  var moment = require('moment');
14
14
  var reactRange = require('react-range');
15
+ var reactIcons = require('@fluentui/react-icons');
15
16
 
16
17
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
17
18
 
@@ -7201,19 +7202,2826 @@ var CardPassengerList = ({
7201
7202
  }) })
7202
7203
  ] });
7203
7204
  };
7205
+ var useStyles23 = reactComponents.makeStyles({
7206
+ card: {
7207
+ padding: "1.5rem",
7208
+ borderRadius: reactComponents.tokens.borderRadiusXLarge,
7209
+ boxShadow: reactComponents.tokens.shadow4,
7210
+ zIndex: 3,
7211
+ width: "100%"
7212
+ },
7213
+ vehicleType: {
7214
+ display: "flex",
7215
+ alignItems: "center",
7216
+ gap: "0.75rem",
7217
+ marginTop: "1rem",
7218
+ marginBottom: "1.5rem"
7219
+ },
7220
+ radioGroup: {
7221
+ marginTop: "1rem"
7222
+ },
7223
+ question: {
7224
+ color: reactComponents.tokens.colorNeutralForeground1,
7225
+ marginBottom: "0.5rem"
7226
+ },
7227
+ headerTitle: {
7228
+ color: reactComponents.tokens.colorNeutralForeground3,
7229
+ fontWeight: "500",
7230
+ width: "250px"
7231
+ }
7232
+ });
7233
+ var CardVehicleDetail = ({
7234
+ serviceTitle,
7235
+ serviceImage,
7236
+ control,
7237
+ vehicleNumberName = "vehicleNumber",
7238
+ showLoadOption = false,
7239
+ hasLoad,
7240
+ onHasLoadChange
7241
+ }) => {
7242
+ const styles = useStyles23();
7243
+ return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.card, children: [
7244
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
7245
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.headerTitle, children: "Detail Kendaraan" }),
7246
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, marginLeft: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}) })
7247
+ ] }),
7248
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.vehicleType, children: [
7249
+ /* @__PURE__ */ jsxRuntime.jsx(
7250
+ "img",
7251
+ {
7252
+ alt: serviceTitle,
7253
+ src: serviceImage,
7254
+ height: 75,
7255
+ width: 75,
7256
+ style: { objectFit: "contain" }
7257
+ }
7258
+ ),
7259
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: serviceTitle })
7260
+ ] }),
7261
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: [
7262
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { style: { color: reactComponents.tokens.colorNeutralForeground1 }, children: "Nomor Kendaraan" }),
7263
+ /* @__PURE__ */ jsxRuntime.jsx(
7264
+ InputDynamic_default,
7265
+ {
7266
+ control,
7267
+ name: vehicleNumberName,
7268
+ placeholder: "Contoh: B1234CD",
7269
+ type: "text"
7270
+ }
7271
+ )
7272
+ ] }),
7273
+ showLoadOption && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.radioGroup, children: [
7274
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.question, children: "Apakah kendaraan membawa muatan?" }),
7275
+ /* @__PURE__ */ jsxRuntime.jsxs(
7276
+ reactComponents.RadioGroup,
7277
+ {
7278
+ value: hasLoad,
7279
+ onChange: (_, data) => onHasLoadChange?.(data.value),
7280
+ layout: "horizontal",
7281
+ children: [
7282
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "true", label: "Ya" }),
7283
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "false", label: "Tidak" })
7284
+ ]
7285
+ }
7286
+ )
7287
+ ] })
7288
+ ] });
7289
+ };
7290
+ var useStyles24 = reactComponents.makeStyles({
7291
+ card: {
7292
+ padding: "1.5rem",
7293
+ borderRadius: reactComponents.tokens.borderRadiusXLarge,
7294
+ boxShadow: reactComponents.tokens.shadow4,
7295
+ zIndex: 3,
7296
+ marginTop: "1.5rem"
7297
+ },
7298
+ header: {
7299
+ display: "flex",
7300
+ justifyContent: "space-between",
7301
+ alignItems: "center",
7302
+ marginBottom: "1rem"
7303
+ },
7304
+ accordion: {
7305
+ ...reactComponents.shorthands.border("1px", "solid", reactComponents.tokens.colorNeutralStroke1),
7306
+ borderRadius: reactComponents.tokens.borderRadiusLarge,
7307
+ marginTop: "1rem"
7308
+ },
7309
+ accordionHeader: {
7310
+ backgroundColor: reactComponents.tokens.colorNeutralBackground2
7311
+ },
7312
+ form: {
7313
+ display: "flex",
7314
+ flexDirection: "column",
7315
+ gap: "1rem",
7316
+ padding: "1rem"
7317
+ },
7318
+ label: {
7319
+ color: reactComponents.tokens.colorNeutralForeground2,
7320
+ marginBottom: "0.25rem",
7321
+ display: "block"
7322
+ },
7323
+ link: {
7324
+ color: reactComponents.tokens.colorBrandForeground1,
7325
+ textDecorationLine: "none",
7326
+ ":hover": {
7327
+ textDecorationLine: "underline"
7328
+ }
7329
+ }
7330
+ });
7331
+ var CardVehicleOwnerForm = ({
7332
+ owners,
7333
+ hasLoad,
7334
+ control,
7335
+ watch,
7336
+ setValue,
7337
+ getValues,
7338
+ onAddOwner,
7339
+ onDeleteOwner,
7340
+ onUpdateOwner,
7341
+ onAddCargo,
7342
+ onDeleteCargo,
7343
+ onUpdateCargoQuantity,
7344
+ companyOptions = [],
7345
+ cityOptions = []
7346
+ }) => {
7347
+ const styles = useStyles24();
7348
+ return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.card, children: [
7349
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
7350
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", flex: 1 }, children: [
7351
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { style: { marginRight: "1rem" }, children: "Informasi Pemilik & Muatan" }),
7352
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { style: { flex: 1 } })
7353
+ ] }),
7354
+ /* @__PURE__ */ jsxRuntime.jsx(
7355
+ reactComponents.Button,
7356
+ {
7357
+ appearance: "transparent",
7358
+ icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:add-24-regular" }),
7359
+ style: { color: reactComponents.tokens.colorNeutralForeground2 },
7360
+ onClick: onAddOwner,
7361
+ children: "Tambah Pemilik"
7362
+ }
7363
+ )
7364
+ ] }),
7365
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { collapsible: true, defaultOpenItems: owners.map((o) => String(o.id)), multiple: true, children: owners.map((owner, index) => /* @__PURE__ */ jsxRuntime.jsxs(
7366
+ reactComponents.AccordionItem,
7367
+ {
7368
+ value: String(owner.id),
7369
+ className: styles.accordion,
7370
+ children: [
7371
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionHeader, { className: styles.accordionHeader, expandIconPosition: "end", children: /* @__PURE__ */ jsxRuntime.jsxs(
7372
+ "div",
7373
+ {
7374
+ style: {
7375
+ display: "flex",
7376
+ justifyContent: "space-between",
7377
+ alignItems: "center",
7378
+ width: "100%"
7379
+ },
7380
+ children: [
7381
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Strong, { children: [
7382
+ "Informasi Pemilik ",
7383
+ index + 1
7384
+ ] }),
7385
+ owners.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
7386
+ reactComponents.Button,
7387
+ {
7388
+ appearance: "transparent",
7389
+ icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:delete-24-regular" }),
7390
+ onClick: (e) => {
7391
+ e.stopPropagation();
7392
+ onDeleteOwner(owner.id);
7393
+ },
7394
+ style: { color: reactComponents.tokens.colorPaletteRedForeground1 }
7395
+ }
7396
+ )
7397
+ ]
7398
+ }
7399
+ ) }),
7400
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.form, children: [
7401
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
7402
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: "Nama Pengirim" }) }),
7403
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { lg: 6, children: [
7404
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: "2rem", marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
7405
+ reactComponents.RadioGroup,
7406
+ {
7407
+ layout: "horizontal",
7408
+ value: owner.senderType,
7409
+ onChange: (_, data) => onUpdateOwner(owner.id, {
7410
+ senderType: data.value
7411
+ }),
7412
+ children: [
7413
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "Perusahaan", label: "Perusahaan" }),
7414
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "Perseorangan", label: "Perseorangan" })
7415
+ ]
7416
+ }
7417
+ ) }),
7418
+ /* @__PURE__ */ jsxRuntime.jsx(
7419
+ InputDynamic_default,
7420
+ {
7421
+ control,
7422
+ name: `owners.${index}.senderName`,
7423
+ placeholder: owner.senderType === "Perusahaan" ? "Pilih Nama Perusahaan" : "Masukkan Nama Pengirim",
7424
+ size: "large",
7425
+ type: owner.senderType === "Perusahaan" ? "select" : "text",
7426
+ options: owner.senderType === "Perusahaan" ? companyOptions : []
7427
+ }
7428
+ )
7429
+ ] }),
7430
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { lg: 6, children: [
7431
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "1rem" } }),
7432
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
7433
+ "Data Estimasi Berat Muatan dan Kendaraan (Ton)",
7434
+ " ",
7435
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
7436
+ ] }),
7437
+ /* @__PURE__ */ jsxRuntime.jsx(
7438
+ InputDynamic_default,
7439
+ {
7440
+ control,
7441
+ name: `owners.${index}.estimatedWeight`,
7442
+ placeholder: "Masukkan Angka",
7443
+ size: "large",
7444
+ type: "number"
7445
+ }
7446
+ )
7447
+ ] })
7448
+ ] }),
7449
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
7450
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { children: [
7451
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: "Kota Asal" }),
7452
+ /* @__PURE__ */ jsxRuntime.jsx(
7453
+ InputDynamic_default,
7454
+ {
7455
+ control,
7456
+ name: `looseCargoOwners.${index}.originCity`,
7457
+ placeholder: "Pilih",
7458
+ type: "select",
7459
+ options: cityOptions
7460
+ }
7461
+ )
7462
+ ] }),
7463
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { children: [
7464
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: "Kota Tujuan" }),
7465
+ /* @__PURE__ */ jsxRuntime.jsx(
7466
+ InputDynamic_default,
7467
+ {
7468
+ control,
7469
+ name: `looseCargoOwners.${index}.destinationCity`,
7470
+ placeholder: "Pilih",
7471
+ type: "select",
7472
+ options: cityOptions
7473
+ }
7474
+ )
7475
+ ] })
7476
+ ] }),
7477
+ hasLoad && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
7478
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
7479
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { children: [
7480
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
7481
+ "Nama Perusahaan Pemilik Barang ",
7482
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
7483
+ ] }),
7484
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: "2rem", marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
7485
+ reactComponents.RadioGroup,
7486
+ {
7487
+ layout: "horizontal",
7488
+ value: owner.cargoOwnerType || "Perusahaan",
7489
+ onChange: (_, data) => onUpdateOwner(owner.id, {
7490
+ cargoOwnerType: data.value
7491
+ }),
7492
+ children: [
7493
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "Perusahaan", label: "Perusahaan" }),
7494
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "Perseorangan", label: "Perseorangan" })
7495
+ ]
7496
+ }
7497
+ ) }),
7498
+ /* @__PURE__ */ jsxRuntime.jsx(
7499
+ InputDynamic_default,
7500
+ {
7501
+ control,
7502
+ name: `looseCargoOwners.${index}.cargoOwnerName`,
7503
+ placeholder: owner.cargoOwnerType === "Perusahaan" ? "Pilih Nama Perusahaan Pemilik Barang" : "Masukkan Nama Pemilik Barang",
7504
+ size: "large",
7505
+ type: owner.cargoOwnerType === "Perusahaan" ? "select" : "text",
7506
+ options: owner.cargoOwnerType === "Perusahaan" ? companyOptions : []
7507
+ }
7508
+ ),
7509
+ /* @__PURE__ */ jsxRuntime.jsx(
7510
+ reactComponents.Caption1,
7511
+ {
7512
+ style: {
7513
+ color: reactComponents.tokens.colorNeutralForeground3,
7514
+ marginTop: "0.25rem"
7515
+ },
7516
+ children: 'Apabila nama perusahaan belum tersedia dapat memilih "Lainnya" dan silakan isi nama perusahaan'
7517
+ }
7518
+ )
7519
+ ] }),
7520
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { children: [
7521
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
7522
+ "Nama Perusahaan Logistik ",
7523
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
7524
+ ] }),
7525
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: "2rem", marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
7526
+ reactComponents.RadioGroup,
7527
+ {
7528
+ layout: "horizontal",
7529
+ value: owner.logisticsCompanyType || "Perseorangan",
7530
+ onChange: (_, data) => onUpdateOwner(owner.id, {
7531
+ logisticsCompanyType: data.value
7532
+ }),
7533
+ children: [
7534
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "Perusahaan", label: "Perusahaan" }),
7535
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "Perseorangan", label: "Perseorangan" })
7536
+ ]
7537
+ }
7538
+ ) }),
7539
+ /* @__PURE__ */ jsxRuntime.jsx(
7540
+ InputDynamic_default,
7541
+ {
7542
+ control,
7543
+ name: `looseCargoOwners.${index}.logisticsCompanyName`,
7544
+ placeholder: owner.logisticsCompanyType === "Perusahaan" ? "Pilih Nama Perusahaan Logistik" : "Masukkan Nama Logistik",
7545
+ size: "large",
7546
+ type: owner.logisticsCompanyType === "Perusahaan" ? "select" : "text",
7547
+ options: owner.logisticsCompanyType === "Perusahaan" ? companyOptions : []
7548
+ }
7549
+ ),
7550
+ /* @__PURE__ */ jsxRuntime.jsx(
7551
+ reactComponents.Caption1,
7552
+ {
7553
+ style: {
7554
+ color: reactComponents.tokens.colorNeutralForeground3,
7555
+ marginTop: "0.25rem"
7556
+ },
7557
+ children: 'Apabila nama perusahaan belum tersedia dapat memilih "Lainnya" dan silakan isi nama perusahaan'
7558
+ }
7559
+ )
7560
+ ] })
7561
+ ] }),
7562
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
7563
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, md: 12, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: "Nama Perusahaan Penerima Barang" }) }),
7564
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { children: [
7565
+ /* @__PURE__ */ jsxRuntime.jsxs(
7566
+ reactComponents.RadioGroup,
7567
+ {
7568
+ layout: "horizontal",
7569
+ value: owner.cargoReceiverType || "Perusahaan",
7570
+ onChange: (_, data) => onUpdateOwner(owner.id, {
7571
+ cargoReceiverType: data.value
7572
+ }),
7573
+ children: [
7574
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "Perusahaan", label: "Perusahaan" }),
7575
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "Perseorangan", label: "Perseorangan" })
7576
+ ]
7577
+ }
7578
+ ),
7579
+ /* @__PURE__ */ jsxRuntime.jsx(
7580
+ InputDynamic_default,
7581
+ {
7582
+ control,
7583
+ name: `looseCargoOwners.${index}.cargoReceiverName`,
7584
+ placeholder: owner.cargoReceiverType === "Perusahaan" ? "Pilih Nama Perusahaan Penerima Barang" : "Masukkan Nama Penerima Barang",
7585
+ size: "large",
7586
+ type: owner.cargoReceiverType === "Perusahaan" ? "select" : "text",
7587
+ options: owner.cargoReceiverType === "Perusahaan" ? companyOptions : []
7588
+ }
7589
+ ),
7590
+ /* @__PURE__ */ jsxRuntime.jsx(
7591
+ reactComponents.Caption1,
7592
+ {
7593
+ style: {
7594
+ color: reactComponents.tokens.colorNeutralForeground3,
7595
+ marginTop: "0.25rem"
7596
+ },
7597
+ children: 'Apabila nama perusahaan belum tersedia dapat memilih "Lainnya" dan silakan isi nama perusahaan'
7598
+ }
7599
+ )
7600
+ ] }),
7601
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { children: [
7602
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: ".5rem" } }),
7603
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
7604
+ "Berat Muatan dan Kendaraan (Ton)",
7605
+ " ",
7606
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
7607
+ ] }),
7608
+ /* @__PURE__ */ jsxRuntime.jsx(
7609
+ InputDynamic_default,
7610
+ {
7611
+ control,
7612
+ name: `looseCargoOwners.${index}.cargoWeight`,
7613
+ placeholder: "Masukkan Angka",
7614
+ type: "number",
7615
+ size: "large"
7616
+ }
7617
+ )
7618
+ ] })
7619
+ ] }),
7620
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { children: /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: "Daftar Muatan" }) }) }),
7621
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { xs: 12, children: [
7622
+ /* @__PURE__ */ jsxRuntime.jsx(
7623
+ reactComponents.Accordion,
7624
+ {
7625
+ collapsible: true,
7626
+ defaultOpenItems: owner.cargoItems?.map((cargo) => `cargo-${cargo.id}`) || [],
7627
+ multiple: true,
7628
+ children: owner.cargoItems?.map((cargo, cargoIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
7629
+ reactComponents.AccordionItem,
7630
+ {
7631
+ value: `cargo-${cargo.id}`,
7632
+ className: styles.accordion,
7633
+ children: [
7634
+ /* @__PURE__ */ jsxRuntime.jsx(
7635
+ reactComponents.AccordionHeader,
7636
+ {
7637
+ className: styles.accordionHeader,
7638
+ expandIconPosition: "end",
7639
+ children: /* @__PURE__ */ jsxRuntime.jsx(
7640
+ "div",
7641
+ {
7642
+ style: {
7643
+ display: "flex",
7644
+ justifyContent: "space-between",
7645
+ alignItems: "center",
7646
+ width: "100%"
7647
+ },
7648
+ children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Strong, { children: [
7649
+ "Muatan ",
7650
+ cargoIndex + 1
7651
+ ] })
7652
+ }
7653
+ )
7654
+ }
7655
+ ),
7656
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.form, children: [
7657
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
7658
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
7659
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
7660
+ "Data Komoditas ",
7661
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
7662
+ ] }),
7663
+ /* @__PURE__ */ jsxRuntime.jsx(
7664
+ InputDynamic_default,
7665
+ {
7666
+ control,
7667
+ name: `looseCargoOwners.${index}.cargo.${cargoIndex}.commodity`,
7668
+ placeholder: "Pilih",
7669
+ type: "select",
7670
+ options: []
7671
+ }
7672
+ ),
7673
+ /* @__PURE__ */ jsxRuntime.jsxs(
7674
+ reactComponents.Caption1,
7675
+ {
7676
+ style: {
7677
+ color: reactComponents.tokens.colorNeutralForeground3,
7678
+ marginTop: "0.25rem"
7679
+ },
7680
+ children: [
7681
+ "Pahami definisi, jenis dan contoh komoditas",
7682
+ " ",
7683
+ /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", className: styles.link, children: "disini" })
7684
+ ]
7685
+ }
7686
+ )
7687
+ ] }),
7688
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
7689
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
7690
+ "Data Jenis Muatan",
7691
+ " ",
7692
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
7693
+ ] }),
7694
+ /* @__PURE__ */ jsxRuntime.jsx(
7695
+ InputDynamic_default,
7696
+ {
7697
+ control,
7698
+ name: `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoType`,
7699
+ placeholder: "Pilih",
7700
+ type: "select",
7701
+ options: [
7702
+ { value: "karung", label: "Karung" },
7703
+ { value: "kg", label: "Kg" },
7704
+ { value: "ton", label: "Ton" },
7705
+ { value: "unit", label: "Unit" }
7706
+ ]
7707
+ }
7708
+ ),
7709
+ /* @__PURE__ */ jsxRuntime.jsx(
7710
+ reactComponents.Caption1,
7711
+ {
7712
+ style: {
7713
+ color: reactComponents.tokens.colorNeutralForeground3,
7714
+ marginTop: "0.25rem"
7715
+ },
7716
+ children: 'Apabila jenis muatan belum tersedia dapat memilih "Lainnya" dan silakan isi jenis muatannya.'
7717
+ }
7718
+ )
7719
+ ] }),
7720
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
7721
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: "Jumlah Muatan" }),
7722
+ /* @__PURE__ */ jsxRuntime.jsxs(
7723
+ "div",
7724
+ {
7725
+ style: {
7726
+ display: "flex",
7727
+ alignItems: "center",
7728
+ border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
7729
+ borderRadius: reactComponents.tokens.borderRadiusMedium,
7730
+ height: "40px",
7731
+ padding: "0 12px",
7732
+ backgroundColor: reactComponents.tokens.colorNeutralBackground1
7733
+ },
7734
+ children: [
7735
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 0.5 } }),
7736
+ /* @__PURE__ */ jsxRuntime.jsxs(
7737
+ "div",
7738
+ {
7739
+ style: {
7740
+ display: "flex",
7741
+ alignItems: "center",
7742
+ gap: "12px"
7743
+ },
7744
+ children: [
7745
+ /* @__PURE__ */ jsxRuntime.jsx(
7746
+ reactComponents.Button,
7747
+ {
7748
+ appearance: "transparent",
7749
+ icon: /* @__PURE__ */ jsxRuntime.jsx(
7750
+ react.Icon,
7751
+ {
7752
+ icon: "fluent:subtract-circle-24-regular",
7753
+ style: {
7754
+ fontSize: "24px",
7755
+ color: reactComponents.tokens.colorNeutralForeground4
7756
+ }
7757
+ }
7758
+ ),
7759
+ size: "small",
7760
+ onClick: () => {
7761
+ const currentVal = getValues(
7762
+ `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`
7763
+ ) || 0;
7764
+ const currentQty = Number(currentVal);
7765
+ if (currentQty > 0) {
7766
+ const newVal = currentQty - 1;
7767
+ setValue(
7768
+ `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`,
7769
+ newVal
7770
+ );
7771
+ onUpdateCargoQuantity(owner.id, cargo.id, newVal);
7772
+ }
7773
+ },
7774
+ style: { minWidth: "32px", padding: "0" }
7775
+ }
7776
+ ),
7777
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "40px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
7778
+ reactHookForm.Controller,
7779
+ {
7780
+ name: `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`,
7781
+ control,
7782
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
7783
+ "input",
7784
+ {
7785
+ ...field,
7786
+ type: "number",
7787
+ style: {
7788
+ border: "none",
7789
+ width: "100%",
7790
+ textAlign: "center",
7791
+ outline: "none",
7792
+ backgroundColor: "transparent",
7793
+ color: reactComponents.tokens.colorNeutralForeground1,
7794
+ fontSize: reactComponents.tokens.fontSizeBase400,
7795
+ fontFamily: reactComponents.tokens.fontFamilyBase
7796
+ },
7797
+ onWheel: (e) => e.target.blur()
7798
+ }
7799
+ )
7800
+ }
7801
+ ) }),
7802
+ /* @__PURE__ */ jsxRuntime.jsx(
7803
+ reactComponents.Button,
7804
+ {
7805
+ appearance: "transparent",
7806
+ icon: /* @__PURE__ */ jsxRuntime.jsx(
7807
+ react.Icon,
7808
+ {
7809
+ icon: "fluent:add-circle-24-regular",
7810
+ style: {
7811
+ fontSize: "24px",
7812
+ color: reactComponents.tokens.colorBrandStroke1
7813
+ }
7814
+ }
7815
+ ),
7816
+ size: "small",
7817
+ onClick: () => {
7818
+ const currentVal = getValues(
7819
+ `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`
7820
+ ) || 0;
7821
+ const currentQty = Number(currentVal);
7822
+ const newVal = currentQty + 1;
7823
+ setValue(
7824
+ `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`,
7825
+ newVal
7826
+ );
7827
+ onUpdateCargoQuantity(owner.id, cargo.id, newVal);
7828
+ },
7829
+ style: { minWidth: "32px", padding: "0" }
7830
+ }
7831
+ )
7832
+ ]
7833
+ }
7834
+ ),
7835
+ /* @__PURE__ */ jsxRuntime.jsx(
7836
+ "div",
7837
+ {
7838
+ style: {
7839
+ flex: 1,
7840
+ textAlign: "left",
7841
+ color: reactComponents.tokens.colorNeutralForeground1,
7842
+ fontSize: reactComponents.tokens.fontSizeBase300,
7843
+ paddingRight: "8px"
7844
+ },
7845
+ children: (() => {
7846
+ const type = watch(
7847
+ `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoType`
7848
+ );
7849
+ if (type === "karung") return "Karung";
7850
+ if (type === "kg") return "Kg";
7851
+ if (type === "ton") return "Ton";
7852
+ if (type === "unit") return "Unit";
7853
+ return "";
7854
+ })()
7855
+ }
7856
+ )
7857
+ ]
7858
+ }
7859
+ )
7860
+ ] }),
7861
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
7862
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: "Harga" }),
7863
+ /* @__PURE__ */ jsxRuntime.jsx(
7864
+ InputDynamic_default,
7865
+ {
7866
+ control,
7867
+ name: `owners.${index}.price`,
7868
+ placeholder: "Rp. 0",
7869
+ disabled: true,
7870
+ size: "large",
7871
+ type: "text"
7872
+ }
7873
+ )
7874
+ ] })
7875
+ ] }),
7876
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
7877
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 6, children: [
7878
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
7879
+ "Data Jenis Industri",
7880
+ " ",
7881
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
7882
+ ] }),
7883
+ /* @__PURE__ */ jsxRuntime.jsx(
7884
+ InputDynamic_default,
7885
+ {
7886
+ control,
7887
+ name: `looseCargoOwners.${index}.cargo.${cargoIndex}.industryType`,
7888
+ placeholder: "Pilih",
7889
+ type: "select",
7890
+ options: []
7891
+ }
7892
+ ),
7893
+ /* @__PURE__ */ jsxRuntime.jsx(
7894
+ reactComponents.Caption1,
7895
+ {
7896
+ style: {
7897
+ color: reactComponents.tokens.colorNeutralForeground3,
7898
+ marginTop: "0.25rem"
7899
+ },
7900
+ children: 'Apabila jenis industri belum tersedia dapat memilih "Lainnya" dan silakan isi jenis muatannya.'
7901
+ }
7902
+ )
7903
+ ] }),
7904
+ /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 6, children: [
7905
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
7906
+ "Kategori Muatan ",
7907
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
7908
+ ] }),
7909
+ /* @__PURE__ */ jsxRuntime.jsx(
7910
+ InputDynamic_default,
7911
+ {
7912
+ control,
7913
+ name: `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoCategory`,
7914
+ placeholder: "Pilih",
7915
+ type: "select",
7916
+ options: []
7917
+ }
7918
+ ),
7919
+ /* @__PURE__ */ jsxRuntime.jsxs(
7920
+ reactComponents.Caption1,
7921
+ {
7922
+ style: {
7923
+ color: reactComponents.tokens.colorNeutralForeground3,
7924
+ marginTop: "0.25rem"
7925
+ },
7926
+ children: [
7927
+ "Pahami definisi, jenis dan contoh kategori muatan",
7928
+ " ",
7929
+ /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", className: styles.link, children: "disini" })
7930
+ ]
7931
+ }
7932
+ )
7933
+ ] })
7934
+ ] }),
7935
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { children: /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: (owner.cargoItems?.length || 0) > 1 && /* @__PURE__ */ jsxRuntime.jsx(
7936
+ reactComponents.Button,
7937
+ {
7938
+ icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:delete-24-regular" }),
7939
+ onClick: (e) => {
7940
+ e.stopPropagation();
7941
+ onDeleteCargo(owner.id, cargo.id);
7942
+ },
7943
+ onKeyDown: (e) => {
7944
+ if (e.key === "Enter" || e.key === " ") {
7945
+ e.stopPropagation();
7946
+ onDeleteCargo(owner.id, cargo.id);
7947
+ }
7948
+ },
7949
+ size: "medium",
7950
+ shape: "circular",
7951
+ style: {
7952
+ border: `1px solid ${reactComponents.tokens.colorPaletteRedForeground1}`,
7953
+ color: reactComponents.tokens.colorPaletteRedForeground1,
7954
+ width: "100%"
7955
+ },
7956
+ children: "Hapus Muatan"
7957
+ }
7958
+ ) }) })
7959
+ ] }) })
7960
+ ]
7961
+ },
7962
+ cargo.id
7963
+ ))
7964
+ }
7965
+ ),
7966
+ /* @__PURE__ */ jsxRuntime.jsx(
7967
+ reactComponents.Button,
7968
+ {
7969
+ appearance: "secondary",
7970
+ icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:add-24-regular" }),
7971
+ shape: "circular",
7972
+ style: {
7973
+ borderColor: reactComponents.tokens.colorBrandStroke1,
7974
+ color: reactComponents.tokens.colorBrandBackground,
7975
+ marginTop: "1rem",
7976
+ width: "100%"
7977
+ },
7978
+ onClick: () => onAddCargo(owner.id),
7979
+ children: "Tambah Muatan"
7980
+ }
7981
+ )
7982
+ ] }) })
7983
+ ] })
7984
+ ] }) })
7985
+ ]
7986
+ },
7987
+ owner.id
7988
+ )) })
7989
+ ] });
7990
+ };
7991
+ var useStyles25 = reactComponents.makeStyles({
7992
+ container: {
7993
+ display: "flex",
7994
+ flexDirection: "column",
7995
+ gap: "2rem"
7996
+ },
7997
+ bookingDetail: {
7998
+ overflow: "visible",
7999
+ borderRadius: reactComponents.tokens.borderRadiusXLarge,
8000
+ boxShadow: reactComponents.tokens.shadow4
8001
+ },
8002
+ bookingDetailTop: {
8003
+ padding: "2rem",
8004
+ borderBottomLeftRadius: 0,
8005
+ borderBottomRightRadius: 0,
8006
+ boxShadow: "none",
8007
+ borderTopLeftRadius: reactComponents.tokens.borderRadiusXLarge,
8008
+ borderTopRightRadius: reactComponents.tokens.borderRadiusXLarge,
8009
+ borderBottom: "0.7em dashed " + reactComponents.tokens.colorNeutralBackground1Hover,
8010
+ overflow: "visible",
8011
+ paddingBottom: "4rem",
8012
+ position: "relative"
8013
+ },
8014
+ bookingDetailBottom: {
8015
+ padding: "2rem",
8016
+ paddingTop: "4rem",
8017
+ borderTopLeftRadius: 0,
8018
+ borderTopRightRadius: 0,
8019
+ boxShadow: "none",
8020
+ borderBottomLeftRadius: reactComponents.tokens.borderRadiusXLarge,
8021
+ borderBottomRightRadius: reactComponents.tokens.borderRadiusXLarge,
8022
+ overflow: "visible",
8023
+ display: "flex",
8024
+ flexDirection: "column",
8025
+ alignItems: "center",
8026
+ justifyContent: "center",
8027
+ gap: "1.5rem"
8028
+ },
8029
+ circularLeft: {
8030
+ position: "absolute",
8031
+ width: "100px",
8032
+ height: "50px",
8033
+ borderRadius: "50%",
8034
+ backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover,
8035
+ left: "-50px",
8036
+ bottom: "-30px",
8037
+ zIndex: 2,
8038
+ boxShadow: "inset -3px 0px 1px rgba(0, 0, 0, 0.1)"
8039
+ },
8040
+ circularRight: {
8041
+ position: "absolute",
8042
+ width: "100px",
8043
+ height: "50px",
8044
+ borderRadius: "50%",
8045
+ backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover,
8046
+ right: "-50px",
8047
+ bottom: "-30px",
8048
+ zIndex: 2,
8049
+ boxShadow: "inset 3px 0px 1px rgba(0, 0, 0, 0.1)"
8050
+ },
8051
+ headerBookingDetail: {
8052
+ display: "flex",
8053
+ justifyContent: "space-between",
8054
+ alignItems: "center"
8055
+ },
8056
+ shipInfo: {
8057
+ display: "flex",
8058
+ flexDirection: "column",
8059
+ alignItems: "center",
8060
+ gap: "1rem"
8061
+ },
8062
+ ticketInfo: {
8063
+ display: "flex",
8064
+ justifyContent: "space-between",
8065
+ alignItems: "center",
8066
+ gap: "0.5em"
8067
+ },
8068
+ ticketTime: {
8069
+ display: "flex",
8070
+ flexDirection: "column",
8071
+ alignItems: "start",
8072
+ gap: "0.5em"
8073
+ },
8074
+ ticketDuration: {
8075
+ display: "flex",
8076
+ alignItems: "center",
8077
+ justifyContent: "center",
8078
+ gap: "0.5rem"
8079
+ },
8080
+ totalPrice: {
8081
+ display: "flex",
8082
+ alignItems: "center",
8083
+ justifyContent: "space-between",
8084
+ gap: "1rem",
8085
+ width: "100%"
8086
+ },
8087
+ gapButton: {
8088
+ width: "100%",
8089
+ display: "flex",
8090
+ flexDirection: "column",
8091
+ gap: reactComponents.tokens.spacingHorizontalM
8092
+ },
8093
+ priceText: {
8094
+ color: reactComponents.tokens.colorPaletteRedForeground1
8095
+ },
8096
+ secondaryButton: {
8097
+ border: "1px solid " + reactComponents.tokens.colorBrandStroke1,
8098
+ color: reactComponents.tokens.colorBrandBackground,
8099
+ width: "100%"
8100
+ }
8101
+ });
8102
+ var CardBookingTicket = ({
8103
+ shipName = "KMP PORTLINK",
8104
+ shipType = "Water Taxi",
8105
+ shipTypeColor = "success",
8106
+ departureDay = "Kamis, 25 Sep",
8107
+ departureTime = "18:15",
8108
+ departureLocation = "Merak, Banten",
8109
+ arrivalDay = "Jumat, 26 Sep",
8110
+ arrivalTime = "19:25",
8111
+ arrivalLocation = "Bakauheni, Lampung",
8112
+ duration = "1 jam 10 menit",
8113
+ totalPrice,
8114
+ reservationStep,
8115
+ paymentStep,
8116
+ onPriceDetailClick,
8117
+ onNext,
8118
+ onPrevious,
8119
+ className
8120
+ }) => {
8121
+ const styles = useStyles25();
8122
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.container} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.bookingDetail, children: [
8123
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.bookingDetailTop, children: [
8124
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: "Booking Details" }),
8125
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerBookingDetail, children: [
8126
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.shipInfo, children: [
8127
+ /* @__PURE__ */ jsxRuntime.jsx("img", { src: "/assets/logo/asdp-default.svg", width: 81, height: 54, alt: "asdp" }),
8128
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: shipName })
8129
+ ] }),
8130
+ /* @__PURE__ */ jsxRuntime.jsx(
8131
+ reactComponents.Badge,
8132
+ {
8133
+ size: "extra-large",
8134
+ appearance: "filled",
8135
+ color: shipTypeColor,
8136
+ iconPosition: "before",
8137
+ shape: "rounded",
8138
+ icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:info-24-regular" }),
8139
+ children: shipType
8140
+ }
8141
+ )
8142
+ ] }),
8143
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: "Rute Perjalanan" }),
8144
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketInfo, children: [
8145
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketTime, children: [
8146
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { children: departureDay }),
8147
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Stronger, { children: [
8148
+ departureTime,
8149
+ " WIB"
8150
+ ] }),
8151
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { children: departureLocation })
8152
+ ] }),
8153
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketDuration, children: [
8154
+ /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:vehicle-ship-24-regular" }),
8155
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption2, { children: [
8156
+ "Estimasi ",
8157
+ duration
8158
+ ] })
8159
+ ] }),
8160
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketTime, children: [
8161
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { children: arrivalDay }),
8162
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Stronger, { children: [
8163
+ arrivalTime,
8164
+ " WIB"
8165
+ ] }),
8166
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { children: arrivalLocation })
8167
+ ] })
8168
+ ] }) }),
8169
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.circularLeft }),
8170
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.circularRight })
8171
+ ] }),
8172
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.bookingDetailBottom, children: [
8173
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.totalPrice, children: [
8174
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: "Total Harga" }),
8175
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Title3, { className: styles.priceText, children: [
8176
+ "IDR ",
8177
+ totalPrice
8178
+ ] }),
8179
+ /* @__PURE__ */ jsxRuntime.jsx(
8180
+ react.Icon,
8181
+ {
8182
+ icon: "fluent:chevron-down-24-filled",
8183
+ onClick: onPriceDetailClick,
8184
+ style: { cursor: "pointer" }
8185
+ }
8186
+ )
8187
+ ] }),
8188
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.gapButton, children: [
8189
+ !(paymentStep === "pay") && /* @__PURE__ */ jsxRuntime.jsx(
8190
+ reactComponents.Button,
8191
+ {
8192
+ appearance: "primary",
8193
+ onClick: onNext,
8194
+ shape: "circular",
8195
+ size: "large",
8196
+ style: { width: "100%" },
8197
+ icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:chevron-right-20-regular" }),
8198
+ iconPosition: "after",
8199
+ children: "Lanjutkan"
8200
+ }
8201
+ ),
8202
+ ["addon", "meals", "review", "payment", "eticket"].includes(reservationStep) && !["pay"].includes(paymentStep) && /* @__PURE__ */ jsxRuntime.jsx(
8203
+ reactComponents.Button,
8204
+ {
8205
+ appearance: "secondary",
8206
+ onClick: onPrevious,
8207
+ shape: "circular",
8208
+ size: "large",
8209
+ className: styles.secondaryButton,
8210
+ icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:chevron-left-20-regular" }),
8211
+ iconPosition: "before",
8212
+ children: "Sebelumnya"
8213
+ }
8214
+ )
8215
+ ] }),
8216
+ paymentStep === "pay" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.gapButton, children: [
8217
+ /* @__PURE__ */ jsxRuntime.jsx(
8218
+ reactComponents.Button,
8219
+ {
8220
+ appearance: "primary",
8221
+ shape: "circular",
8222
+ size: "large",
8223
+ style: { width: "100%" },
8224
+ onClick: onNext,
8225
+ children: "Lihat Pemesanan"
8226
+ }
8227
+ ),
8228
+ /* @__PURE__ */ jsxRuntime.jsx(
8229
+ reactComponents.Button,
8230
+ {
8231
+ appearance: "secondary",
8232
+ shape: "circular",
8233
+ size: "large",
8234
+ className: styles.secondaryButton,
8235
+ onClick: onPrevious,
8236
+ children: "Ubah Metode Pembayaran"
8237
+ }
8238
+ )
8239
+ ] })
8240
+ ] })
8241
+ ] }) });
8242
+ };
8243
+ var useStyles26 = reactComponents.makeStyles({
8244
+ faqSection: {
8245
+ // marginTop: '2rem', // Let parent control spacing if needed, or keep consistent
8246
+ },
8247
+ faqCard: {
8248
+ padding: "2rem",
8249
+ borderRadius: reactComponents.tokens.borderRadiusXLarge,
8250
+ boxShadow: reactComponents.tokens.shadow4
8251
+ },
8252
+ accordionItem: {
8253
+ borderBottom: `1px solid ${reactComponents.tokens.colorNeutralStroke2}`,
8254
+ padding: reactComponents.tokens.spacingVerticalS
8255
+ },
8256
+ accordionHeader: {
8257
+ fontSize: reactComponents.tokens.fontSizeBase300,
8258
+ fontWeight: reactComponents.tokens.fontWeightBold
8259
+ }
8260
+ });
8261
+ var FAQ_ITEMS = [
8262
+ {
8263
+ value: "1",
8264
+ question: "FAQ 1",
8265
+ answer: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus saepe repudiandae dolore pariatur veniam! Aliquam nesciunt saepe, optio inventore fuga quam dignissimos possimus, dolorem alias, blanditiis veniam voluptatibus eaque ex?"
8266
+ },
8267
+ {
8268
+ value: "2",
8269
+ question: "FAQ 2",
8270
+ answer: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolor consequatur, sit facere ex, ullam quos natus sapiente nihil cum libero velit, labore necessitatibus rem? Tenetur omnis tempora alias totam."
8271
+ },
8272
+ {
8273
+ value: "3",
8274
+ question: "FAQ 3",
8275
+ answer: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae officiis modi quaerat eum illo, consectetur aperiam atque? Corrupti cupiditate sequi iusto reiciendis dignissimos, eius, nihil temporibus eaque delectus, saepe ullam!"
8276
+ },
8277
+ {
8278
+ value: "4",
8279
+ question: "FAQ 4",
8280
+ answer: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint maiores debitis, earum animi dolorum unde asperiores accusantium nemo consectetur nulla reiciendis eveniet pariatur autem rerum adipisci sequi officia vero ipsam!"
8281
+ }
8282
+ ];
8283
+ var CardFAQ = ({ className }) => {
8284
+ const styles = useStyles26();
8285
+ return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.faqCard, children: [
8286
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: "FAQ" }),
8287
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { collapsible: true, children: FAQ_ITEMS.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionItem, { value: item.value, className: styles.accordionItem, children: [
8288
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionHeader, { className: styles.accordionHeader, expandIconPosition: "end", children: [
8289
+ /* @__PURE__ */ jsxRuntime.jsx(
8290
+ react.Icon,
8291
+ {
8292
+ icon: "fluent:question-circle-28-regular",
8293
+ style: { marginRight: "5px" }
8294
+ }
8295
+ ),
8296
+ " ",
8297
+ item.question
8298
+ ] }),
8299
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { children: item.answer })
8300
+ ] }, item.value)) })
8301
+ ] });
8302
+ };
8303
+ var useStyles27 = reactComponents.makeStyles({
8304
+ card: {
8305
+ backgroundColor: reactComponents.tokens.colorNeutralBackground1,
8306
+ boxShadow: reactComponents.tokens.shadow4,
8307
+ ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalL, reactComponents.tokens.spacingHorizontalXXL),
8308
+ borderRadius: reactComponents.tokens.borderRadiusXLarge,
8309
+ zIndex: 3
8310
+ },
8311
+ gapRow: {
8312
+ display: "flex",
8313
+ flexDirection: "column",
8314
+ rowGap: reactComponents.tokens.spacingVerticalXXL
8315
+ },
8316
+ titleDivider: {
8317
+ display: "flex",
8318
+ alignItems: "center",
8319
+ width: "100%"
8320
+ },
8321
+ textTitle: {
8322
+ fontWeight: reactComponents.tokens.fontWeightRegular,
8323
+ whiteSpace: "nowrap",
8324
+ marginRight: reactComponents.tokens.spacingHorizontalM
8325
+ },
8326
+ sizeDivider: {
8327
+ flexGrow: 1
8328
+ },
8329
+ card1: {
8330
+ display: "flex",
8331
+ flexDirection: "column",
8332
+ ...reactComponents.shorthands.padding(reactComponents.tokens.spacingHorizontalL, reactComponents.tokens.spacingVerticalL),
8333
+ rowGap: reactComponents.tokens.spacingHorizontalM
8334
+ },
8335
+ horizontalContainer: {
8336
+ display: "flex",
8337
+ justifyContent: "space-between",
8338
+ alignItems: "center"
8339
+ },
8340
+ itemFlexCard1: {
8341
+ display: "flex",
8342
+ columnGap: reactComponents.tokens.spacingHorizontalM,
8343
+ alignItems: "center"
8344
+ },
8345
+ textContainerCard1: {
8346
+ display: "flex",
8347
+ flexDirection: "column"
8348
+ },
8349
+ img: {
8350
+ objectFit: "contain"
8351
+ },
8352
+ // Footer
8353
+ footerContainer: {
8354
+ display: "flex",
8355
+ justifyContent: "space-between",
8356
+ alignItems: "center",
8357
+ width: "100%"
8358
+ },
8359
+ footerColRight: {
8360
+ display: "flex",
8361
+ alignItems: "center"
8362
+ },
8363
+ detailToogle: {
8364
+ color: reactComponents.tokens.colorBrandForeground1
8365
+ },
8366
+ // Assurance Styles
8367
+ badge: {
8368
+ ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalNone, reactComponents.tokens.spacingHorizontalL),
8369
+ backgroundColor: reactComponents.tokens.colorPaletteBlueBackground2,
8370
+ // Approximate for Shared_Dark_blue_Primary if not avail
8371
+ color: reactComponents.tokens.colorNeutralForegroundOnBrand,
8372
+ width: "fit-content"
8373
+ },
8374
+ breakdownContainer: {
8375
+ display: "flex",
8376
+ flexDirection: "column",
8377
+ gap: reactComponents.tokens.spacingVerticalM
8378
+ },
8379
+ breakdownRow: {
8380
+ display: "flex",
8381
+ justifyContent: "space-between",
8382
+ width: "100%"
8383
+ },
8384
+ // Meal Styles
8385
+ mealListContainer: {
8386
+ display: "flex",
8387
+ flexDirection: "column",
8388
+ rowGap: reactComponents.tokens.spacingVerticalXL,
8389
+ marginTop: reactComponents.tokens.spacingVerticalM
8390
+ },
8391
+ mealItem: {
8392
+ display: "flex",
8393
+ alignItems: "flex-start",
8394
+ columnGap: reactComponents.tokens.spacingHorizontalL,
8395
+ gap: "12px",
8396
+ ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalS, 0)
8397
+ },
8398
+ mealImage: {
8399
+ borderRadius: reactComponents.tokens.borderRadiusMedium,
8400
+ objectFit: "cover",
8401
+ flexShrink: 0
8402
+ },
8403
+ mealContent: {
8404
+ display: "flex",
8405
+ flexDirection: "column",
8406
+ flexGrow: 1,
8407
+ rowGap: reactComponents.tokens.spacingVerticalXS
8408
+ },
8409
+ mealDescription: {
8410
+ color: reactComponents.tokens.colorNeutralForeground3,
8411
+ display: "-webkit-box",
8412
+ WebkitLineClamp: "2",
8413
+ WebkitBoxOrient: "vertical",
8414
+ overflow: "hidden"
8415
+ },
8416
+ mealPriceInfo: {
8417
+ color: reactComponents.tokens.colorBrandBackground
8418
+ },
8419
+ mealActions: {
8420
+ display: "flex",
8421
+ flexDirection: "column",
8422
+ alignItems: "flex-end",
8423
+ rowGap: reactComponents.tokens.spacingVerticalM,
8424
+ flexShrink: 0
8425
+ },
8426
+ qtySelector: {
8427
+ display: "flex",
8428
+ alignItems: "center",
8429
+ columnGap: reactComponents.tokens.spacingHorizontalM
8430
+ },
8431
+ qtyButton: {
8432
+ minWidth: "32px",
8433
+ height: "32px",
8434
+ ...reactComponents.shorthands.padding(0)
8435
+ },
8436
+ deleteMealButton: {
8437
+ display: "flex",
8438
+ alignItems: "center",
8439
+ columnGap: reactComponents.tokens.spacingHorizontalS,
8440
+ color: reactComponents.tokens.colorPaletteRedForeground1,
8441
+ ...reactComponents.shorthands.border("1px", "solid", reactComponents.tokens.colorPaletteRedForeground1),
8442
+ ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalXS, reactComponents.tokens.spacingHorizontalS),
8443
+ backgroundColor: "transparent",
8444
+ cursor: "pointer",
8445
+ fontSize: reactComponents.tokens.fontSizeBase300,
8446
+ ":hover": {
8447
+ backgroundColor: reactComponents.tokens.colorPaletteRedBackground1
8448
+ }
8449
+ },
8450
+ totalContainer: {
8451
+ display: "flex",
8452
+ justifyContent: "space-between",
8453
+ alignItems: "center",
8454
+ marginTop: reactComponents.tokens.spacingVerticalL,
8455
+ paddingTop: reactComponents.tokens.spacingVerticalM
8456
+ }
8457
+ });
8458
+ var CardAddon = ({
8459
+ title,
8460
+ itemTitle,
8461
+ itemSubtitle,
8462
+ iconUrl,
8463
+ description,
8464
+ rightAction,
8465
+ footerData,
8466
+ assuranceData,
8467
+ mealData,
8468
+ children,
8469
+ className
8470
+ }) => {
8471
+ const styles = useStyles27();
8472
+ return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.gapRow, children: [
8473
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.titleDivider, children: [
8474
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { className: styles.textTitle, children: title }),
8475
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.sizeDivider })
8476
+ ] }),
8477
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.card1, children: [
8478
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.horizontalContainer, children: [
8479
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.itemFlexCard1, children: [
8480
+ iconUrl && /* @__PURE__ */ jsxRuntime.jsx(
8481
+ "img",
8482
+ {
8483
+ src: iconUrl,
8484
+ alt: "icon",
8485
+ width: 81,
8486
+ height: 56,
8487
+ className: styles.img
8488
+ }
8489
+ ),
8490
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContainerCard1, children: [
8491
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: itemTitle }),
8492
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: itemSubtitle })
8493
+ ] })
8494
+ ] }),
8495
+ rightAction
8496
+ ] }),
8497
+ description && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingRight: "20%" }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: description }) }),
8498
+ footerData && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: footerData.actionType === "detail-link" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.footerContainer, children: [
8499
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption1, { children: [
8500
+ footerData.priceLabel,
8501
+ " ",
8502
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption1Stronger, { children: [
8503
+ "Rp",
8504
+ footerData.price.toLocaleString("id-ID"),
8505
+ footerData.priceUnit
8506
+ ] })
8507
+ ] }) }),
8508
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.footerColRight, children: /* @__PURE__ */ jsxRuntime.jsx(
8509
+ reactComponents.Button,
8510
+ {
8511
+ appearance: "transparent",
8512
+ size: "small",
8513
+ style: {
8514
+ color: reactComponents.tokens.colorBrandForeground1
8515
+ },
8516
+ onClick: footerData.onActionClick,
8517
+ icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:chevron-down-12-regular" }),
8518
+ iconPosition: "after",
8519
+ children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.detailToogle, children: footerData.actionLabel || "Lihat detail" })
8520
+ }
8521
+ ) })
8522
+ ] }) }),
8523
+ assuranceData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
8524
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
8525
+ reactComponents.Badge,
8526
+ {
8527
+ size: "large",
8528
+ appearance: "filled",
8529
+ icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:ticket-diagonal-16-regular" }),
8530
+ iconPosition: "after",
8531
+ className: styles.badge,
8532
+ style: { backgroundColor: "rgb(30, 57, 141)" },
8533
+ children: [
8534
+ assuranceData.totalPassenger,
8535
+ " Asuransi Penumpang"
8536
+ ]
8537
+ }
8538
+ ) }),
8539
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.breakdownContainer, children: [
8540
+ assuranceData.items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.breakdownRow, children: [
8541
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { children: [
8542
+ item.label,
8543
+ " (",
8544
+ item.priceDetails,
8545
+ ")"
8546
+ ] }),
8547
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { children: [
8548
+ "Rp",
8549
+ item.totalPrice.toLocaleString("id-ID")
8550
+ ] })
8551
+ ] }, idx)),
8552
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.breakdownRow, children: [
8553
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: "Total Harga" }),
8554
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle2, { children: [
8555
+ "Rp",
8556
+ assuranceData.totalPrice.toLocaleString("id-ID")
8557
+ ] })
8558
+ ] })
8559
+ ] })
8560
+ ] }),
8561
+ mealData && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.mealListContainer, children: mealData.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mealItem, children: [
8562
+ /* @__PURE__ */ jsxRuntime.jsx(
8563
+ "img",
8564
+ {
8565
+ src: item.image,
8566
+ alt: item.name,
8567
+ width: 119,
8568
+ height: 119,
8569
+ className: styles.mealImage
8570
+ }
8571
+ ),
8572
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mealContent, children: [
8573
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: item.name }),
8574
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.mealDescription, children: item.description }),
8575
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Strong, { className: styles.mealPriceInfo, children: [
8576
+ "Rp",
8577
+ item.price.toLocaleString("id-ID"),
8578
+ " x ",
8579
+ item.quantity,
8580
+ " = Rp",
8581
+ (item.price * item.quantity).toLocaleString("id-ID")
8582
+ ] })
8583
+ ] }),
8584
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mealActions, children: [
8585
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.qtySelector, children: [
8586
+ /* @__PURE__ */ jsxRuntime.jsx(
8587
+ reactComponents.Button,
8588
+ {
8589
+ appearance: "subtle",
8590
+ shape: "circular",
8591
+ className: styles.qtyButton,
8592
+ disabled: item.quantity <= 1,
8593
+ icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.SubtractRegular, {}),
8594
+ onClick: () => mealData.onUpdateQuantity(item.id, -1),
8595
+ style: {
8596
+ border: `1px solid ${item.quantity <= 1 ? reactComponents.tokens.colorNeutralForegroundDisabled : reactComponents.tokens.colorBrandBackground}`,
8597
+ color: item.quantity <= 1 ? reactComponents.tokens.colorNeutralForegroundDisabled : reactComponents.tokens.colorBrandBackground
8598
+ }
8599
+ }
8600
+ ),
8601
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.quantity }),
8602
+ /* @__PURE__ */ jsxRuntime.jsx(
8603
+ reactComponents.Button,
8604
+ {
8605
+ appearance: "subtle",
8606
+ className: styles.qtyButton,
8607
+ shape: "circular",
8608
+ icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.AddRegular, {}),
8609
+ onClick: () => mealData.onUpdateQuantity(item.id, 1),
8610
+ style: {
8611
+ border: `1px solid ${reactComponents.tokens.colorBrandBackground}`,
8612
+ color: reactComponents.tokens.colorBrandBackground
8613
+ }
8614
+ }
8615
+ )
8616
+ ] }),
8617
+ /* @__PURE__ */ jsxRuntime.jsxs(
8618
+ reactComponents.Button,
8619
+ {
8620
+ appearance: "subtle",
8621
+ className: styles.deleteMealButton,
8622
+ shape: "rounded",
8623
+ onClick: () => mealData.onDelete(item.id),
8624
+ children: [
8625
+ /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DeleteRegular, { fontSize: 18 }),
8626
+ "Hapus Pesanan"
8627
+ ]
8628
+ }
8629
+ )
8630
+ ] })
8631
+ ] }, item.id)) }) }),
8632
+ footerData && footerData.actionType === "primary-button" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
8633
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.totalContainer, children: [
8634
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: footerData.priceLabel }),
8635
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle1, { style: { fontSize: reactComponents.tokens.fontSizeBase600 }, children: [
8636
+ "Rp. ",
8637
+ footerData.price.toLocaleString("id-ID")
8638
+ ] })
8639
+ ] }),
8640
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
8641
+ reactComponents.Button,
8642
+ {
8643
+ appearance: "secondary",
8644
+ shape: "circular",
8645
+ onClick: footerData.onActionClick,
8646
+ style: {
8647
+ width: "100%",
8648
+ borderColor: reactComponents.tokens.colorBrandStroke1,
8649
+ color: reactComponents.tokens.colorBrandBackground
8650
+ },
8651
+ children: footerData.actionLabel
8652
+ }
8653
+ ) })
8654
+ ] }),
8655
+ children
8656
+ ] })
8657
+ ] }) });
8658
+ };
8659
+ var useStyles28 = reactComponents.makeStyles({
8660
+ container: {
8661
+ display: "flex",
8662
+ flexDirection: "column",
8663
+ gap: reactComponents.tokens.spacingVerticalXXL
8664
+ },
8665
+ banner: {
8666
+ position: "relative",
8667
+ height: "240px",
8668
+ width: "100%",
8669
+ borderRadius: reactComponents.tokens.borderRadiusXLarge,
8670
+ overflow: "hidden",
8671
+ display: "flex",
8672
+ flexDirection: "column",
8673
+ justifyContent: "center",
8674
+ alignItems: "center",
8675
+ color: "white",
8676
+ textAlign: "center",
8677
+ ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalXXL)
8678
+ },
8679
+ bannerOverlay: {
8680
+ position: "absolute",
8681
+ top: 0,
8682
+ left: 0,
8683
+ right: 0,
8684
+ bottom: 0,
8685
+ backgroundColor: "rgba(0, 0, 0, 0.4)",
8686
+ zIndex: 1
8687
+ },
8688
+ bannerBg: {
8689
+ position: "absolute",
8690
+ top: 0,
8691
+ left: 0,
8692
+ right: 0,
8693
+ bottom: 0,
8694
+ objectFit: "cover",
8695
+ zIndex: 0,
8696
+ width: "100%",
8697
+ height: "100%"
8698
+ },
8699
+ bannerContent: {
8700
+ position: "relative",
8701
+ zIndex: 2
8702
+ },
8703
+ bannerTitle: {
8704
+ fontSize: "48px",
8705
+ fontWeight: reactComponents.tokens.fontWeightBold,
8706
+ marginBottom: reactComponents.tokens.spacingVerticalS,
8707
+ color: "white"
8708
+ // Ensure text is white on banner
8709
+ },
8710
+ bannerSubtitle: {
8711
+ color: "white"
8712
+ },
8713
+ disclaimer: {
8714
+ display: "flex",
8715
+ alignItems: "center",
8716
+ gap: reactComponents.tokens.spacingHorizontalS,
8717
+ backgroundColor: reactComponents.tokens.colorNeutralBackground2,
8718
+ ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalS, reactComponents.tokens.spacingHorizontalM),
8719
+ ...reactComponents.shorthands.border("1px", "solid", reactComponents.tokens.colorNeutralStroke2),
8720
+ borderRadius: reactComponents.tokens.borderRadiusMedium
8721
+ },
8722
+ sectionTitle: {
8723
+ marginBottom: reactComponents.tokens.spacingVerticalL
8724
+ },
8725
+ grid: {
8726
+ display: "grid",
8727
+ gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
8728
+ columnGap: reactComponents.tokens.spacingHorizontalL,
8729
+ rowGap: reactComponents.tokens.spacingVerticalL
8730
+ },
8731
+ productCard: {
8732
+ display: "flex",
8733
+ flexDirection: "row",
8734
+ ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalM),
8735
+ gap: reactComponents.tokens.spacingHorizontalM,
8736
+ height: "100%"
8737
+ },
8738
+ productImage: {
8739
+ width: "100px",
8740
+ height: "100px",
8741
+ borderRadius: reactComponents.tokens.borderRadiusMedium,
8742
+ objectFit: "cover",
8743
+ flexShrink: 0
8744
+ },
8745
+ productInfo: {
8746
+ display: "flex",
8747
+ flexDirection: "column",
8748
+ justifyContent: "space-between",
8749
+ flexGrow: 1
8750
+ },
8751
+ productDescription: {
8752
+ color: reactComponents.tokens.colorNeutralForeground3,
8753
+ display: "-webkit-box",
8754
+ WebkitLineClamp: "2",
8755
+ WebkitBoxOrient: "vertical",
8756
+ overflow: "hidden",
8757
+ marginBottom: reactComponents.tokens.spacingVerticalS
8758
+ },
8759
+ productFooter: {
8760
+ display: "flex",
8761
+ justifyContent: "space-between",
8762
+ alignItems: "center",
8763
+ marginTop: "auto"
8764
+ },
8765
+ price: {
8766
+ color: "#D13438",
8767
+ // Or use a token if available/consistent
8768
+ fontWeight: reactComponents.tokens.fontWeightSemibold
8769
+ },
8770
+ quantitySelector: {
8771
+ display: "flex",
8772
+ alignItems: "center",
8773
+ gap: reactComponents.tokens.spacingHorizontalS
8774
+ },
8775
+ addButton: {
8776
+ // We'll use color="brand" or similar from Fluent v9 if possible, or fallback to custom styles
8777
+ // ...shorthands.border('1px', 'solid', tokens.colorBrandStroke1),
8778
+ // color: tokens.colorBrandForeground1,
8779
+ },
8780
+ // Replicating the custom add button style from original
8781
+ customAddButton: {
8782
+ border: "1px solid rgb(30, 57, 141)",
8783
+ // tokensV2.lightModeColors.Brand_Stroke_1_Rest
8784
+ color: "rgb(30, 57, 141)"
8785
+ // tokensV2.lightModeColors.Brand_Foreground_1_Rest
8786
+ }
8787
+ });
8788
+ var CardMealCatalog = ({
8789
+ banner,
8790
+ disclaimerText,
8791
+ categories,
8792
+ onAdd,
8793
+ onUpdateQuantity,
8794
+ className
8795
+ }) => {
8796
+ const styles = useStyles28();
8797
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
8798
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.banner, children: [
8799
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.bannerOverlay }),
8800
+ /* @__PURE__ */ jsxRuntime.jsx(
8801
+ "img",
8802
+ {
8803
+ src: banner.imageUrl,
8804
+ alt: banner.title,
8805
+ className: styles.bannerBg
8806
+ }
8807
+ ),
8808
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.bannerContent, children: [
8809
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Display, { className: styles.bannerTitle, children: banner.title }),
8810
+ /* @__PURE__ */ jsxRuntime.jsx("br", {}),
8811
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title2, { className: styles.bannerSubtitle, children: banner.subtitle })
8812
+ ] })
8813
+ ] }),
8814
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.disclaimer, children: [
8815
+ /* @__PURE__ */ jsxRuntime.jsx(reactIcons.InfoRegular, {}),
8816
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: disclaimerText })
8817
+ ] }),
8818
+ categories.map((cat, index) => /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
8819
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { className: styles.sectionTitle, style: { textTransform: "capitalize" }, children: cat.category }),
8820
+ /* @__PURE__ */ jsxRuntime.jsx("br", {}),
8821
+ /* @__PURE__ */ jsxRuntime.jsx("br", {}),
8822
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.grid, children: cat.list.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.productCard, children: [
8823
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Image, { src: item.image, alt: item.name, className: styles.productImage }),
8824
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.productInfo, children: [
8825
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
8826
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: item.name }),
8827
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.productDescription, children: item.description })
8828
+ ] }),
8829
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.productFooter, children: [
8830
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.price, children: [
8831
+ "Rp",
8832
+ item.price.toLocaleString("id-ID")
8833
+ ] }),
8834
+ item.quantity > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.quantitySelector, children: [
8835
+ /* @__PURE__ */ jsxRuntime.jsx(
8836
+ reactComponents.Button,
8837
+ {
8838
+ size: "small",
8839
+ shape: "circular",
8840
+ icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.SubtractRegular, {}),
8841
+ onClick: () => onUpdateQuantity(item.id, -1)
8842
+ }
8843
+ ),
8844
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.quantity }),
8845
+ /* @__PURE__ */ jsxRuntime.jsx(
8846
+ reactComponents.Button,
8847
+ {
8848
+ size: "small",
8849
+ shape: "circular",
8850
+ icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.AddRegular, {}),
8851
+ onClick: () => onUpdateQuantity(item.id, 1)
8852
+ }
8853
+ )
8854
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx(
8855
+ reactComponents.Button,
8856
+ {
8857
+ size: "small",
8858
+ shape: "rounded",
8859
+ className: styles.customAddButton,
8860
+ onClick: () => onAdd(item),
8861
+ children: "Tambah"
8862
+ }
8863
+ )
8864
+ ] })
8865
+ ] })
8866
+ ] }, item.id)) })
8867
+ ] }, index))
8868
+ ] });
8869
+ };
8870
+ var useStyles29 = reactComponents.makeStyles({
8871
+ card: {
8872
+ padding: "1.5rem",
8873
+ borderRadius: reactComponents.tokens.borderRadiusXLarge,
8874
+ boxShadow: reactComponents.tokens.shadow4,
8875
+ zIndex: 3
8876
+ },
8877
+ headerContainer: {
8878
+ display: "flex",
8879
+ alignItems: "center",
8880
+ marginBottom: "1rem",
8881
+ gap: "1rem"
8882
+ },
8883
+ headerTitle: {
8884
+ whiteSpace: "nowrap",
8885
+ fontWeight: reactComponents.tokens.fontWeightSemibold
8886
+ },
8887
+ headerLine: {
8888
+ height: "1px",
8889
+ flexGrow: 1,
8890
+ backgroundColor: reactComponents.tokens.colorNeutralStroke2
8891
+ },
8892
+ contentContainer: {
8893
+ display: "flex",
8894
+ flexDirection: "column",
8895
+ gap: reactComponents.tokens.spacingVerticalM
8896
+ },
8897
+ row: {
8898
+ display: "flex",
8899
+ justifyContent: "space-between",
8900
+ alignItems: "center"
8901
+ },
8902
+ defaultLabel: {
8903
+ color: reactComponents.tokens.colorNeutralForeground2
8904
+ },
8905
+ defaultValue: {
8906
+ // color: tokens.colorNeutralForegroundDisabled, // In ferizy: tokensV2.lightModeColors.Neutral_Foreground_Disabled_Rest
8907
+ color: "#bdbdbd",
8908
+ // Approximate fallback or use token if available in ferryui context
8909
+ textAlign: "right"
8910
+ }
8911
+ });
8912
+ var CardReview = ({
8913
+ title,
8914
+ items,
8915
+ children,
8916
+ className,
8917
+ headerAction
8918
+ }) => {
8919
+ const styles = useStyles29();
8920
+ return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: [
8921
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
8922
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.headerTitle, children: title }),
8923
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerLine }),
8924
+ headerAction && /* @__PURE__ */ jsxRuntime.jsx("div", { children: headerAction })
8925
+ ] }),
8926
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.contentContainer, children: [
8927
+ items?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.row} ${item.className || ""}`, children: [
8928
+ typeof item.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: `${styles.defaultLabel} ${item.labelClassName || ""}`, children: item.label }) : (
8929
+ // Clone element to append className if it's a valid React element
8930
+ React5__default.default.isValidElement(item.label) ? React5__default.default.cloneElement(item.label, {
8931
+ className: `${styles.defaultLabel} ${item.labelClassName || ""}${item.label.props.className ? " " + item.label.props.className : ""}`
8932
+ }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.defaultLabel} ${item.labelClassName || ""}`, children: item.label })
8933
+ ),
8934
+ typeof item.value === "string" || typeof item.value === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: `${styles.defaultValue} ${item.valueClassName || ""}`, children: item.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.defaultValue} ${item.valueClassName || ""}`, children: item.value })
8935
+ ] }, index)),
8936
+ children
8937
+ ] })
8938
+ ] });
8939
+ };
8940
+ var useStyles30 = reactComponents.makeStyles({
8941
+ card: {
8942
+ padding: "1.5rem",
8943
+ borderRadius: reactComponents.tokens.borderRadiusXLarge,
8944
+ boxShadow: reactComponents.tokens.shadow4,
8945
+ zIndex: 3
8946
+ },
8947
+ headerContainer: {
8948
+ display: "flex",
8949
+ alignItems: "center",
8950
+ marginBottom: "1rem",
8951
+ gap: "1rem"
8952
+ },
8953
+ headerTitle: {
8954
+ whiteSpace: "nowrap",
8955
+ fontWeight: reactComponents.tokens.fontWeightSemibold
8956
+ },
8957
+ headerLine: {
8958
+ height: "1px",
8959
+ flexGrow: 1,
8960
+ backgroundColor: reactComponents.tokens.colorNeutralStroke2
8961
+ },
8962
+ contentContainer: {
8963
+ display: "flex",
8964
+ flexDirection: "column"
8965
+ },
8966
+ passengerItem: {
8967
+ display: "flex",
8968
+ flexDirection: "column",
8969
+ gap: reactComponents.tokens.spacingVerticalS,
8970
+ paddingBottom: reactComponents.tokens.spacingVerticalL,
8971
+ paddingTop: reactComponents.tokens.spacingVerticalM,
8972
+ borderBottom: `1px solid ${reactComponents.tokens.colorNeutralStroke2}`,
8973
+ ":last-child": {
8974
+ borderBottom: "none",
8975
+ paddingBottom: 0
8976
+ }
8977
+ // Matches styles.passengerItem in Review.tsx
8978
+ },
8979
+ itemHeader: {
8980
+ display: "flex",
8981
+ justifyContent: "space-between",
8982
+ alignItems: "center",
8983
+ marginBottom: reactComponents.tokens.spacingVerticalS
8984
+ },
8985
+ name: {
8986
+ color: "#00B8D4",
8987
+ // Cyan color from design
8988
+ fontSize: reactComponents.tokens.fontSizeBase400
8989
+ },
8990
+ // Badge Styles
8991
+ badgeContainer: {
8992
+ display: "flex",
8993
+ alignItems: "center",
8994
+ position: "relative"
8995
+ },
8996
+ badgeContent: {
8997
+ display: "flex",
8998
+ alignItems: "center",
8999
+ padding: "0.25rem 0.75rem 0.25rem 1.5rem",
9000
+ // Extra left padding for the icon overlap
9001
+ borderRadius: "0 4px 4px 0",
9002
+ borderTopRightRadius: "9999px",
9003
+ borderBottomRightRadius: "9999px",
9004
+ color: "white",
9005
+ fontSize: reactComponents.tokens.fontSizeBase200,
9006
+ fontWeight: reactComponents.tokens.fontWeightMedium,
9007
+ marginLeft: "-14px",
9008
+ // Pull the text container under the icon
9009
+ minHeight: "24px"
9010
+ },
9011
+ badgeIcon: {
9012
+ width: "28px",
9013
+ height: "32px",
9014
+ zIndex: 1,
9015
+ filter: "drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))"
9016
+ },
9017
+ fields: {
9018
+ display: "grid",
9019
+ gridTemplateColumns: "1fr 1fr",
9020
+ gap: reactComponents.tokens.spacingHorizontalL
9021
+ },
9022
+ inputBox: {
9023
+ border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
9024
+ borderRadius: reactComponents.tokens.borderRadiusMedium,
9025
+ padding: `${reactComponents.tokens.spacingVerticalS} ${reactComponents.tokens.spacingHorizontalM}`,
9026
+ display: "flex",
9027
+ alignItems: "center",
9028
+ height: "32px"
9029
+ }
9030
+ });
9031
+ var CardReviewPassenger = ({
9032
+ title = "Penumpang",
9033
+ passengers,
9034
+ className
9035
+ }) => {
9036
+ const styles = useStyles30();
9037
+ return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: [
9038
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
9039
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.headerTitle, children: title }),
9040
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerLine })
9041
+ ] }),
9042
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.contentContainer, children: passengers.map((passenger, index) => {
9043
+ const badgeConfig = getBadgeConfig(passenger.serviceClass);
9044
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.passengerItem, children: [
9045
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.itemHeader, children: [
9046
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: styles.name, children: passenger.name }),
9047
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.badgeContainer, children: [
9048
+ badgeConfig.icon && /* @__PURE__ */ jsxRuntime.jsx(
9049
+ reactComponents.Image,
9050
+ {
9051
+ src: badgeConfig.icon,
9052
+ alt: passenger.ticketClass,
9053
+ className: styles.badgeIcon,
9054
+ height: 28,
9055
+ width: 24
9056
+ }
9057
+ ),
9058
+ /* @__PURE__ */ jsxRuntime.jsx(
9059
+ "div",
9060
+ {
9061
+ className: styles.badgeContent,
9062
+ style: { backgroundColor: badgeConfig.color },
9063
+ children: passenger.ticketClass
9064
+ }
9065
+ )
9066
+ ] })
9067
+ ] }),
9068
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fields, children: [
9069
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Nomor ID", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.inputBox, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: passenger.identityNumber }) }) }),
9070
+ /* @__PURE__ */ jsxRuntime.jsx(
9071
+ reactComponents.Field,
9072
+ {
9073
+ label: passenger.ageLabel,
9074
+ size: "small",
9075
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.inputBox, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: passenger.ageValue }) })
9076
+ }
9077
+ )
9078
+ ] })
9079
+ ] }, passenger.id || index);
9080
+ }) })
9081
+ ] });
9082
+ };
9083
+ var useStyles31 = reactComponents.makeStyles({
9084
+ list: {
9085
+ margin: 0,
9086
+ padding: 0,
9087
+ listStyle: "none",
9088
+ counterReset: "list-counter"
9089
+ },
9090
+ listItem: {
9091
+ counterIncrement: "list-counter",
9092
+ display: "flex",
9093
+ marginBottom: reactComponents.tokens.spacingVerticalS,
9094
+ "&::before": {
9095
+ content: 'counter(list-counter) "."',
9096
+ marginRight: reactComponents.tokens.spacingHorizontalS,
9097
+ fontWeight: reactComponents.tokens.fontWeightRegular
9098
+ }
9099
+ }
9100
+ });
9101
+ var PriceDetailsTerms = () => {
9102
+ const styles = useStyles31();
9103
+ const linkColor = reactComponents.tokens.colorBrandBackground;
9104
+ const bookingTerms = [
9105
+ "Transaksi booking akan dibatalkan secara otomatis apabila Anda tidak menyelesaikan pembayaran pada periode waktu yang telah ditentukan.",
9106
+ "Setelah pembyaran berhasil, dikumen E-Tiket dapat di unduh melailui E-Mail atau menu \u201CPesanan Saya\u201D di Web Reservation atau Mobile Application Ferizy.",
9107
+ "Dokumen E-Tiket wajib ditunjukan saat melakukan proses Masuk Pelabuhan (Check-In)",
9108
+ "Anda sudah dapat Masuk Pelabuhan (Check-In) mulai dari 2 (dua) jam sebelum jadwal masukpelabuhan yang Anda pilih.",
9109
+ "Tiket akan hangus (expired) apabila Anda belum Masuk Pelabuhan (Check-In) hingga melewati batas waktu jadwal Masuk Pelabuhan yang Anda pilih."
9110
+ ];
9111
+ const agreementTerms = [
9112
+ /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
9113
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Link, { href: "/terms-and-conditions", style: { color: linkColor }, children: "Syarat & Ketentuan" }),
9114
+ "\xA0Ferizy."
9115
+ ] }),
9116
+ /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
9117
+ "Ketentuan persyaratan menyeberang sesuai dengan\xA0",
9118
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Link, { href: "/surat-edaran-satgas-covid-19", style: { color: linkColor }, children: "Surat Edaran Satgas Covid-19 Nomor 23 Tahun 2002." })
9119
+ ] }),
9120
+ "Bahwa apabila saya didapati tidak memenuhi ketentuan persyaratan menyeberang pada butir 2 (dua) diatas yang mengakibatkan saya terlambat atau tidaj dapat melakukan Check-In di pelabuhan tepat waktu, maka saya menerima dan menyetujui untuk diproses sesuai dengan Syarat & Ketentuan Ferizy sebagaimana tersebut pada butir 1 (satu) di atas."
9121
+ ];
9122
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
9123
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles.list, children: bookingTerms.map((term, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles.listItem, children: term }, index)) }) }),
9124
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
9125
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { children: [
9126
+ "Dengan menekan tombol \u201CLanjutkan Pembayaran\u201D, maka saya telah membaca dan menyetujuii :",
9127
+ /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles.list, children: agreementTerms.map((term, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles.listItem, children: term }, index)) })
9128
+ ] })
9129
+ ] });
9130
+ };
9131
+ var useStyles32 = reactComponents.makeStyles({
9132
+ card: {
9133
+ padding: "1.5rem",
9134
+ borderRadius: reactComponents.tokens.borderRadiusXLarge,
9135
+ boxShadow: reactComponents.tokens.shadow4,
9136
+ zIndex: 3
9137
+ },
9138
+ headerContainer: {
9139
+ display: "flex",
9140
+ alignItems: "center",
9141
+ marginBottom: "1rem",
9142
+ gap: "1rem"
9143
+ },
9144
+ headerTitle: {
9145
+ whiteSpace: "nowrap",
9146
+ fontWeight: reactComponents.tokens.fontWeightSemibold
9147
+ },
9148
+ headerLine: {
9149
+ height: "1px",
9150
+ flexGrow: 1,
9151
+ backgroundColor: reactComponents.tokens.colorNeutralStroke2
9152
+ },
9153
+ container: {
9154
+ display: "flex",
9155
+ flexDirection: "column",
9156
+ gap: reactComponents.tokens.spacingVerticalM
9157
+ },
9158
+ row: {
9159
+ display: "flex",
9160
+ justifyContent: "space-between",
9161
+ alignItems: "center"
9162
+ },
9163
+ label: {
9164
+ color: reactComponents.tokens.colorNeutralForeground2
9165
+ },
9166
+ value: {
9167
+ // Standard value color - using token or fallback
9168
+ color: "#bdbdbd",
9169
+ textAlign: "right"
9170
+ },
9171
+ textCritical: {
9172
+ color: reactComponents.tokens.colorPaletteRedBackground3
9173
+ },
9174
+ textMuted: {
9175
+ color: reactComponents.tokens.colorNeutralForegroundDisabled
9176
+ },
9177
+ subSection: {
9178
+ display: "flex",
9179
+ flexDirection: "column",
9180
+ gap: reactComponents.tokens.spacingVerticalS,
9181
+ marginTop: reactComponents.tokens.spacingVerticalS
9182
+ },
9183
+ totalRow: {
9184
+ display: "flex",
9185
+ justifyContent: "space-between",
9186
+ alignItems: "center",
9187
+ marginTop: reactComponents.tokens.spacingVerticalM,
9188
+ color: reactComponents.tokens.colorPaletteRedBackground3
9189
+ },
9190
+ totalLabel: {
9191
+ // Standard color for total label if needed
9192
+ },
9193
+ totalValue: {
9194
+ // Standard color for total value if needed
9195
+ },
9196
+ description: {
9197
+ color: reactComponents.tokens.colorNeutralForeground4,
9198
+ marginTop: "-8px"
9199
+ }
9200
+ });
9201
+ var CardPriceDetails = ({
9202
+ title = "Rincian Harga",
9203
+ sections,
9204
+ total
9205
+ }) => {
9206
+ const styles = useStyles32();
9207
+ const getVariantClass = (variant) => {
9208
+ switch (variant) {
9209
+ case "danger":
9210
+ return styles.textCritical;
9211
+ case "muted":
9212
+ return styles.textMuted;
9213
+ default:
9214
+ return "";
9215
+ }
9216
+ };
9217
+ const renderItem = (item, key) => {
9218
+ const variantClass = getVariantClass(item.variant);
9219
+ const isTaxLike = item.variant === "danger";
9220
+ return /* @__PURE__ */ jsxRuntime.jsxs(React5__default.default.Fragment, { children: [
9221
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
9222
+ isTaxLike ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { className: variantClass, children: item.name }) : /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: reactComponents.mergeClasses(styles.label, variantClass), children: item.name }),
9223
+ isTaxLike ? /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Strong, { className: reactComponents.mergeClasses(styles.value, variantClass), children: [
9224
+ "Rp. ",
9225
+ item.price.toLocaleString("id-ID")
9226
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: reactComponents.mergeClasses(styles.value, variantClass), children: [
9227
+ item.isRedeem ? "-" : "Rp. ",
9228
+ item.price.toLocaleString("id-ID")
9229
+ ] })
9230
+ ] }),
9231
+ item.description && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.description, children: item.description })
9232
+ ] }, key);
9233
+ };
9234
+ return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.card, children: [
9235
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
9236
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.headerTitle, children: title }),
9237
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerLine })
9238
+ ] }),
9239
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
9240
+ sections.map((section, index) => {
9241
+ if (section.title) {
9242
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.subSection, children: [
9243
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: section.title }),
9244
+ section.detail.map((item, i) => renderItem(item, i))
9245
+ ] }, index);
9246
+ }
9247
+ return /* @__PURE__ */ jsxRuntime.jsx(React5__default.default.Fragment, { children: section.detail.map((item, i) => renderItem(item, i)) }, index);
9248
+ }),
9249
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
9250
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.totalRow, children: [
9251
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.totalLabel, children: "Total Pembayaran" }),
9252
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle1, { className: styles.totalValue, children: [
9253
+ "Rp. ",
9254
+ total.toLocaleString("id-ID")
9255
+ ] })
9256
+ ] }),
9257
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
9258
+ /* @__PURE__ */ jsxRuntime.jsx(PriceDetailsTerms, {})
9259
+ ] })
9260
+ ] });
9261
+ };
9262
+ var useStyles33 = reactComponents.makeStyles({
9263
+ container: {
9264
+ display: "flex",
9265
+ flexDirection: "column",
9266
+ width: "100%",
9267
+ rowGap: reactComponents.tokens.spacingHorizontalXXL
9268
+ },
9269
+ dividerContainer: {
9270
+ marginBottom: reactComponents.tokens.spacingHorizontalXXL
9271
+ },
9272
+ title: {
9273
+ paddingLeft: reactComponents.tokens.spacingHorizontalSNudge,
9274
+ paddingRight: reactComponents.tokens.spacingHorizontalSNudge
9275
+ },
9276
+ itemContainer: {
9277
+ display: "flex",
9278
+ flexDirection: "column",
9279
+ gap: reactComponents.tokens.spacingHorizontalXXL,
9280
+ width: "100%"
9281
+ },
9282
+ optionContainer: {
9283
+ display: "flex",
9284
+ justifyContent: "space-between",
9285
+ width: "100%",
9286
+ cursor: "pointer",
9287
+ alignItems: "center"
9288
+ },
9289
+ codeImage: {
9290
+ display: "flex",
9291
+ gap: reactComponents.tokens.spacingHorizontalL,
9292
+ alignItems: "center",
9293
+ justifyContent: "center",
9294
+ textAlign: "center"
9295
+ },
9296
+ optionLabel: {
9297
+ color: reactComponents.tokens.colorNeutralForeground2
9298
+ },
9299
+ image: {
9300
+ width: "40px",
9301
+ height: "40px",
9302
+ objectFit: "contain"
9303
+ },
9304
+ card: {
9305
+ position: "relative",
9306
+ borderRadius: reactComponents.tokens.borderRadiusXLarge,
9307
+ ...reactComponents.shorthands.padding(reactComponents.tokens.spacingHorizontalXL, reactComponents.tokens.spacingVerticalXXL),
9308
+ backgroundColor: reactComponents.tokens.colorNeutralBackground1,
9309
+ zIndex: 3
9310
+ }
9311
+ });
9312
+ var CardPaymentMethodList = ({
9313
+ methods,
9314
+ selectedValue,
9315
+ onSelect
9316
+ }) => {
9317
+ const styles = useStyles33();
9318
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.container}`, children: methods.map((category, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
9319
+ index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}) }),
9320
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionItem, { value: category.value, children: [
9321
+ /* @__PURE__ */ jsxRuntime.jsx(
9322
+ reactComponents.AccordionHeader,
9323
+ {
9324
+ expandIconPosition: "end",
9325
+ className: styles.title,
9326
+ children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: category.title || category.value })
9327
+ }
9328
+ ),
9329
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.itemContainer, children: category.options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
9330
+ "div",
9331
+ {
9332
+ className: styles.optionContainer,
9333
+ onClick: () => onSelect(option.value),
9334
+ children: [
9335
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.codeImage, children: [
9336
+ /* @__PURE__ */ jsxRuntime.jsx(
9337
+ "img",
9338
+ {
9339
+ src: option.image,
9340
+ alt: option.label,
9341
+ className: styles.image
9342
+ }
9343
+ ),
9344
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: styles.optionLabel, children: option.label })
9345
+ ] }),
9346
+ /* @__PURE__ */ jsxRuntime.jsx(
9347
+ reactComponents.Radio,
9348
+ {
9349
+ checked: selectedValue === option.value,
9350
+ onChange: () => onSelect(option.value),
9351
+ value: option.value,
9352
+ name: "payment-method"
9353
+ }
9354
+ )
9355
+ ]
9356
+ },
9357
+ option.value
9358
+ )) }) })
9359
+ ] }) })
9360
+ ] }, category.value || index)) }) });
9361
+ };
9362
+ var useStyles34 = reactComponents.makeStyles({
9363
+ container: {
9364
+ display: "flex",
9365
+ flexDirection: "column",
9366
+ width: "100%"
9367
+ },
9368
+ titleContainer: {
9369
+ marginBottom: reactComponents.tokens.spacingVerticalM
9370
+ },
9371
+ title: {
9372
+ color: reactComponents.tokens.colorNeutralForeground2
9373
+ // Neutral_Stroke_Accessible_Rest based on Review.tsx usually
9374
+ },
9375
+ list: {
9376
+ margin: 0,
9377
+ padding: 0,
9378
+ listStyle: "none",
9379
+ counterReset: "guide-counter"
9380
+ },
9381
+ listItem: {
9382
+ counterIncrement: "guide-counter",
9383
+ display: "flex",
9384
+ marginBottom: reactComponents.tokens.spacingVerticalS,
9385
+ "&::before": {
9386
+ content: 'counter(guide-counter) "."',
9387
+ marginRight: reactComponents.tokens.spacingHorizontalS,
9388
+ fontWeight: reactComponents.tokens.fontWeightRegular
9389
+ }
9390
+ }
9391
+ });
9392
+ var CardPaymentGuide = ({
9393
+ title = "Cara Pembayaran",
9394
+ guides,
9395
+ className
9396
+ }) => {
9397
+ const styles = useStyles34();
9398
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
9399
+ title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.titleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.title, children: title }) }),
9400
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { collapsible: true, multiple: true, children: guides.map((guide, index) => /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionItem, { value: guide.value || String(index), children: [
9401
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionHeader, { expandIconPosition: "end", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: guide.title }) }),
9402
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles.list, children: guide.steps.map((step, stepIndex) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles.listItem, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: step }) }, stepIndex)) }) })
9403
+ ] }, guide.value || index)) })
9404
+ ] });
9405
+ };
9406
+ var useStyles35 = reactComponents.makeStyles({
9407
+ container: {
9408
+ display: "flex",
9409
+ flexDirection: "column",
9410
+ gap: reactComponents.tokens.spacingHorizontalXXL,
9411
+ width: "100%"
9412
+ },
9413
+ headerRow: {
9414
+ display: "flex",
9415
+ flexDirection: "column",
9416
+ alignItems: "center",
9417
+ justifyContent: "center",
9418
+ gap: reactComponents.tokens.spacingHorizontalXXL,
9419
+ textAlign: "center"
9420
+ },
9421
+ expiryTitle: {
9422
+ fontSize: reactComponents.tokens.fontSizeBase500,
9423
+ // 19px approx/mapping
9424
+ color: reactComponents.tokens.colorPaletteRedBackground3
9425
+ // Foundation_Danger_error
9426
+ },
9427
+ infoCard: {
9428
+ border: `${reactComponents.tokens.strokeWidthThin} solid ${reactComponents.tokens.colorNeutralStroke1}`,
9429
+ borderRadius: reactComponents.tokens.borderRadiusXLarge,
9430
+ // 12px -> XLarge/Large depending on token map
9431
+ padding: reactComponents.tokens.spacingHorizontalXXL,
9432
+ display: "flex",
9433
+ flexDirection: "column",
9434
+ gap: reactComponents.tokens.spacingVerticalXXL
9435
+ },
9436
+ codeCard: {
9437
+ borderRadius: reactComponents.tokens.borderRadiusMedium,
9438
+ padding: reactComponents.tokens.spacingHorizontalL,
9439
+ backgroundColor: reactComponents.tokens.colorNeutralBackground3,
9440
+ // Neutral_Background_2_Rest
9441
+ display: "flex",
9442
+ flexDirection: "column",
9443
+ gap: reactComponents.tokens.spacingHorizontalL,
9444
+ alignItems: "center"
9445
+ },
9446
+ bankRow: {
9447
+ display: "flex",
9448
+ gap: reactComponents.tokens.spacingHorizontalM,
9449
+ justifyContent: "center",
9450
+ alignItems: "center"
9451
+ },
9452
+ vaRow: {
9453
+ display: "flex",
9454
+ flexDirection: "column",
9455
+ gap: reactComponents.tokens.spacingHorizontalXXXL,
9456
+ alignItems: "center"
9457
+ },
9458
+ input: {
9459
+ backgroundColor: reactComponents.tokens.colorNeutralBackground3
9460
+ },
9461
+ checkStatusButton: {
9462
+ width: "100%",
9463
+ border: `1px solid ${reactComponents.tokens.colorBrandBackground}`,
9464
+ color: reactComponents.tokens.colorBrandBackground
9465
+ },
9466
+ card: {
9467
+ position: "relative",
9468
+ ...reactComponents.shorthands.padding(
9469
+ reactComponents.tokens.spacingHorizontalXL,
9470
+ reactComponents.tokens.spacingHorizontalXXL
9471
+ ),
9472
+ backgroundColor: reactComponents.tokens.colorNeutralBackground1,
9473
+ boxShadow: reactComponents.tokens.shadow4,
9474
+ zIndex: 3
9475
+ }
9476
+ });
9477
+ var CardPaymentInfo = ({
9478
+ expiryDate,
9479
+ bank,
9480
+ virtualAccount,
9481
+ totalAmount,
9482
+ guides,
9483
+ onCopyVA,
9484
+ onCheckStatus
9485
+ }) => {
9486
+ const styles = useStyles35();
9487
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
9488
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
9489
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: "Kode virtual akun berlaku sampai" }),
9490
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title2, { className: styles.expiryTitle, children: expiryDate })
9491
+ ] }),
9492
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.infoCard, children: [
9493
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.codeCard, children: [
9494
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.bankRow, children: [
9495
+ /* @__PURE__ */ jsxRuntime.jsx("img", { src: bank.icon, alt: bank.name, width: 40, height: 40 }),
9496
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: bank.name })
9497
+ ] }),
9498
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.vaRow, children: [
9499
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title1, { children: virtualAccount }),
9500
+ /* @__PURE__ */ jsxRuntime.jsx(
9501
+ reactComponents.Button,
9502
+ {
9503
+ appearance: "primary",
9504
+ size: "large",
9505
+ shape: "circular",
9506
+ onClick: onCopyVA,
9507
+ children: "Salin Kode"
9508
+ }
9509
+ )
9510
+ ] })
9511
+ ] }),
9512
+ /* @__PURE__ */ jsxRuntime.jsx(
9513
+ reactComponents.Field,
9514
+ {
9515
+ size: "large",
9516
+ label: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { style: { color: reactComponents.tokens.colorNeutralForeground1 }, children: "Total Pembayaran" }),
9517
+ children: /* @__PURE__ */ jsxRuntime.jsx(
9518
+ reactComponents.Input,
9519
+ {
9520
+ disabled: true,
9521
+ value: `Rp. ${totalAmount.toLocaleString("id-ID")}`,
9522
+ className: styles.input
9523
+ }
9524
+ )
9525
+ }
9526
+ )
9527
+ ] }),
9528
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
9529
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: reactComponents.tokens.spacingVerticalM }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { style: { color: reactComponents.tokens.colorNeutralForeground2 }, children: "Klik tombol dibawah ini jika sudah melakukan pembayaran" }) }),
9530
+ /* @__PURE__ */ jsxRuntime.jsx(
9531
+ reactComponents.Button,
9532
+ {
9533
+ appearance: "secondary",
9534
+ size: "large",
9535
+ shape: "circular",
9536
+ className: styles.checkStatusButton,
9537
+ onClick: onCheckStatus,
9538
+ children: "Cek Status Pembayaran"
9539
+ }
9540
+ )
9541
+ ] }),
9542
+ /* @__PURE__ */ jsxRuntime.jsx(CardPaymentGuide, { guides })
9543
+ ] }) });
9544
+ };
9545
+ var useStyles36 = reactComponents.makeStyles({
9546
+ activeCard: {
9547
+ width: "100%",
9548
+ // padding: tokens.spacingHorizontalNone, // default
9549
+ color: reactComponents.tokens.colorNeutralStrokeAccessible
9550
+ },
9551
+ colGap: {
9552
+ gap: "58px"
9553
+ // approx spacing['580']
9554
+ },
9555
+ cardInfo: {
9556
+ border: `${reactComponents.tokens.strokeWidthThin} solid ${reactComponents.tokens.colorNeutralStroke1}`,
9557
+ backgroundColor: reactComponents.tokens.colorNeutralBackground1,
9558
+ borderRadius: reactComponents.tokens.borderRadiusXLarge,
9559
+ // borderRadius[120] -> XLarge approx
9560
+ padding: reactComponents.tokens.spacingHorizontalXXL
9561
+ },
9562
+ rowGap: {
9563
+ rowGap: "22px"
9564
+ // spacing[220]
9565
+ },
9566
+ gapdetail: {
9567
+ rowGap: reactComponents.tokens.spacingVerticalL
9568
+ },
9569
+ itemDetail: {
9570
+ display: "flex",
9571
+ justifyContent: "space-between"
9572
+ },
9573
+ divider: {
9574
+ "::before": {
9575
+ ...reactComponents.shorthands.borderColor(reactComponents.tokens.colorBrandBackground)
9576
+ // brandColors[80]
9577
+ }
9578
+ },
9579
+ titleDivider: {
9580
+ display: "flex",
9581
+ gap: "18px"
9582
+ // spacing[180]
9583
+ },
9584
+ centerContent: {
9585
+ display: "flex",
9586
+ justifyContent: "center",
9587
+ alignItems: "center",
9588
+ flexDirection: "column"
9589
+ }
9590
+ });
9591
+ var CardStatusOrder = ({
9592
+ bookingCode,
9593
+ departureDate,
9594
+ departureTime,
9595
+ arrivalDate,
9596
+ arrivalTime,
9597
+ origin,
9598
+ destination,
9599
+ duration = "-",
9600
+ vehicleClass,
9601
+ serviceType,
9602
+ vehicleNumber,
9603
+ shipType,
9604
+ statusLabel = "Sudah Dibayar",
9605
+ statusIcon,
9606
+ statusColor = "success",
9607
+ illustrationUrl = "/assets/images/illustrations/ticket.svg",
9608
+ title = "Pembayaran berhasil",
9609
+ description = "Tiket Anda aktif dan siap digunakan.",
9610
+ onClickViewTicket,
9611
+ className
9612
+ }) => {
9613
+ const styles = useStyles36();
9614
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.activeCard} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.colGap, children: [
9615
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { direction: "column", nogutter: true, children: [
9616
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
9617
+ "img",
9618
+ {
9619
+ src: illustrationUrl,
9620
+ alt: "E-Ticket",
9621
+ width: 406,
9622
+ height: 266
9623
+ }
9624
+ ) }),
9625
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { direction: "column", justify: "center", align: "center", nogutter: true, children: [
9626
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: title }) }),
9627
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: description }) })
9628
+ ] }) })
9629
+ ] }) }),
9630
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.cardInfo, children: /* @__PURE__ */ jsxRuntime.jsxs(
9631
+ reactGridSystem.Row,
9632
+ {
9633
+ direction: "column",
9634
+ justify: "center",
9635
+ align: "center",
9636
+ nogutter: true,
9637
+ className: styles.rowGap,
9638
+ children: [
9639
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.titleDivider, children: [
9640
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: "Detail Pemesanan" }),
9641
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { style: { width: 0 } })
9642
+ ] }) }),
9643
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { justify: "center", align: "center", nogutter: true, children: [
9644
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: "Status" }) }),
9645
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
9646
+ reactComponents.Badge,
9647
+ {
9648
+ color: statusColor,
9649
+ size: "extra-large",
9650
+ appearance: "filled",
9651
+ shape: "rounded",
9652
+ icon: statusIcon || /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:checkmark-circle-20-regular" }),
9653
+ children: statusLabel
9654
+ }
9655
+ ) })
9656
+ ] }) }),
9657
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { direction: "column", nogutter: true, className: styles.gapdetail, children: [
9658
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.itemDetail, children: [
9659
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Stronger, { children: "Kode Booking" }),
9660
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: bookingCode })
9661
+ ] }) }),
9662
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.itemDetail, children: [
9663
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Stronger, { children: "Jadwal Masuk Pelabuhan" }),
9664
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption1, { children: [
9665
+ departureDate,
9666
+ ", ",
9667
+ departureTime
9668
+ ] })
9669
+ ] }) }),
9670
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.itemDetail, children: [
9671
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Stronger, { children: "Rute" }),
9672
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption1, { children: [
9673
+ origin,
9674
+ " ",
9675
+ /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:arrow-right-20-regular" }),
9676
+ " ",
9677
+ destination
9678
+ ] })
9679
+ ] }) }),
9680
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.itemDetail, children: [
9681
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Stronger, { children: "Jenis Pengguna Jasa" }),
9682
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: vehicleClass })
9683
+ ] }) }),
9684
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.itemDetail, children: [
9685
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Stronger, { children: "Layanan" }),
9686
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: shipType || serviceType })
9687
+ ] }) })
9688
+ ] }) }),
9689
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
9690
+ reactComponents.Button,
9691
+ {
9692
+ appearance: "primary",
9693
+ size: "large",
9694
+ style: { width: "100%" },
9695
+ shape: "circular",
9696
+ onClick: onClickViewTicket,
9697
+ children: "Lihat E-Tiket"
9698
+ }
9699
+ ) })
9700
+ ]
9701
+ }
9702
+ ) }) })
9703
+ ] }) });
9704
+ };
9705
+ var useStyles37 = reactComponents.makeStyles({
9706
+ surface: {
9707
+ width: "680px",
9708
+ maxWidth: "90vw",
9709
+ ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalL, reactComponents.tokens.spacingHorizontalL),
9710
+ borderRadius: reactComponents.tokens.borderRadiusXLarge
9711
+ },
9712
+ dialogTitle: {
9713
+ "& h2": {
9714
+ fontSize: reactComponents.tokens.fontSizeBase600,
9715
+ fontWeight: reactComponents.tokens.fontWeightSemibold
9716
+ }
9717
+ },
9718
+ card: {
9719
+ backgroundColor: reactComponents.tokens.colorNeutralBackground1,
9720
+ ...reactComponents.shorthands.border("1px", "solid", reactComponents.tokens.colorNeutralStroke2),
9721
+ ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalXXL, reactComponents.tokens.spacingHorizontalXXL),
9722
+ boxShadow: "none"
9723
+ },
9724
+ content: {
9725
+ display: "flex",
9726
+ flexDirection: "column",
9727
+ gap: reactComponents.tokens.spacingVerticalL
9728
+ },
9729
+ section: {
9730
+ display: "flex",
9731
+ flexDirection: "column",
9732
+ gap: reactComponents.tokens.spacingVerticalS
9733
+ },
9734
+ row: {
9735
+ display: "flex",
9736
+ justifyContent: "space-between",
9737
+ alignItems: "center"
9738
+ },
9739
+ vehicleTitle: {
9740
+ fontSize: reactComponents.tokens.fontSizeBase500,
9741
+ fontWeight: reactComponents.tokens.fontWeightSemibold,
9742
+ color: reactComponents.tokens.colorNeutralForeground4
9743
+ },
9744
+ passengerDetail: {
9745
+ color: reactComponents.tokens.colorNeutralForeground4,
9746
+ fontSize: reactComponents.tokens.fontSizeBase200,
9747
+ marginTop: reactComponents.tokens.spacingVerticalXS
9748
+ },
9749
+ addonHeader: {
9750
+ fontSize: reactComponents.tokens.fontSizeBase500,
9751
+ fontWeight: reactComponents.tokens.fontWeightSemibold,
9752
+ color: reactComponents.tokens.colorNeutralForeground1,
9753
+ marginTop: reactComponents.tokens.spacingVerticalM
9754
+ },
9755
+ priceValue: {
9756
+ color: reactComponents.tokens.colorNeutralForeground4,
9757
+ fontSize: reactComponents.tokens.fontSizeBase300
9758
+ },
9759
+ itemLabel: {
9760
+ color: reactComponents.tokens.colorNeutralForeground4,
9761
+ fontSize: reactComponents.tokens.fontSizeBase300
9762
+ },
9763
+ totalLabel: {
9764
+ color: reactComponents.tokens.colorNeutralForeground4,
9765
+ fontSize: reactComponents.tokens.fontSizeBase400
9766
+ },
9767
+ totalValue: {
9768
+ color: reactComponents.tokens.colorNeutralForeground4,
9769
+ fontSize: reactComponents.tokens.fontSizeBase400
9770
+ },
9771
+ totalTagihanLabel: {
9772
+ color: reactComponents.tokens.colorNeutralForeground1,
9773
+ fontWeight: reactComponents.tokens.fontWeightSemibold,
9774
+ fontSize: reactComponents.tokens.fontSizeBase400
9775
+ },
9776
+ totalTagihanValue: {
9777
+ color: reactComponents.tokens.colorNeutralForeground1,
9778
+ fontWeight: reactComponents.tokens.fontWeightSemibold,
9779
+ fontSize: reactComponents.tokens.fontSizeBase400
9780
+ },
9781
+ ppnLabel: {
9782
+ color: reactComponents.tokens.colorNeutralForeground4,
9783
+ fontSize: reactComponents.tokens.fontSizeBase400
9784
+ },
9785
+ ppnValue: {
9786
+ color: reactComponents.tokens.colorNeutralForeground4,
9787
+ fontSize: reactComponents.tokens.fontSizeBase400
9788
+ },
9789
+ ppnNote: {
9790
+ color: reactComponents.tokens.colorNeutralForeground4,
9791
+ fontSize: reactComponents.tokens.fontSizeBase100,
9792
+ fontStyle: "italic",
9793
+ marginTop: reactComponents.tokens.spacingVerticalXS
9794
+ },
9795
+ grandTotalLabel: {
9796
+ color: "#D13438",
9797
+ fontSize: reactComponents.tokens.fontSizeHero700,
9798
+ fontWeight: reactComponents.tokens.fontWeightSemibold
9799
+ },
9800
+ grandTotalValue: {
9801
+ color: "#D13438",
9802
+ fontSize: reactComponents.tokens.fontSizeHero800,
9803
+ fontWeight: reactComponents.tokens.fontWeightSemibold
9804
+ },
9805
+ badge: {
9806
+ marginLeft: reactComponents.tokens.spacingHorizontalS,
9807
+ backgroundColor: "#107C10",
9808
+ color: "white"
9809
+ },
9810
+ divider: {
9811
+ margin: `${reactComponents.tokens.spacingVerticalL} 0`
9812
+ },
9813
+ closeButton: {
9814
+ color: reactComponents.tokens.colorNeutralForeground1
9815
+ }
9816
+ });
9817
+ var ModalPriceDetail = ({
9818
+ isOpen,
9819
+ onOpenChange,
9820
+ detailItems,
9821
+ addonItems,
9822
+ subTotal,
9823
+ taxAmount,
9824
+ grandTotal,
9825
+ ...props
9826
+ }) => {
9827
+ const styles = useStyles37();
9828
+ return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Dialog, { open: isOpen, onOpenChange: (_, data) => onOpenChange(data.open), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.surface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
9829
+ /* @__PURE__ */ jsxRuntime.jsx(
9830
+ reactComponents.DialogTitle,
9831
+ {
9832
+ className: styles.dialogTitle,
9833
+ action: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTrigger, { action: "close", children: /* @__PURE__ */ jsxRuntime.jsx(
9834
+ reactComponents.Button,
9835
+ {
9836
+ appearance: "subtle",
9837
+ "aria-label": "close",
9838
+ icon: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
9839
+ "path",
9840
+ {
9841
+ d: "M18 6L6 18M6 6L18 18",
9842
+ stroke: "currentColor",
9843
+ strokeWidth: "2",
9844
+ strokeLinecap: "round",
9845
+ strokeLinejoin: "round"
9846
+ }
9847
+ ) })
9848
+ }
9849
+ ) }),
9850
+ children: "Rincian Harga"
9851
+ }
9852
+ ),
9853
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
9854
+ detailItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
9855
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
9856
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
9857
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.vehicleTitle, children: item.label }),
9858
+ item.badge && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Badge, { size: "medium", shape: "rounded", className: styles.badge, children: item.badge })
9859
+ ] }),
9860
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.priceValue, children: [
9861
+ "Rp. ",
9862
+ item.price.toLocaleString("id-ID")
9863
+ ] })
9864
+ ] }),
9865
+ item.list && item.list.map((subItem) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.passengerDetail, children: [
9866
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: subItem.label }),
9867
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { float: "right" }, children: [
9868
+ "IDR. ",
9869
+ item.price.toLocaleString("id-ID")
9870
+ ] })
9871
+ ] }, subItem.key))
9872
+ ] }, item.key)),
9873
+ addonItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
9874
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.addonHeader, children: "Add On" }),
9875
+ addonItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
9876
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.itemLabel, children: item.label }),
9877
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.priceValue, children: [
9878
+ "IDR. ",
9879
+ item.price.toLocaleString("id-ID")
9880
+ ] })
9881
+ ] }, item.key))
9882
+ ] }),
9883
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.divider }),
9884
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
9885
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.totalLabel, children: "Sub Tagihan" }),
9886
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.totalValue, children: [
9887
+ "IDR.",
9888
+ subTotal.toLocaleString("id-ID")
9889
+ ] })
9890
+ ] }),
9891
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
9892
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.totalTagihanLabel, children: "Total Tagihan" }),
9893
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.totalTagihanValue, children: [
9894
+ "IDR.",
9895
+ subTotal.toLocaleString("id-ID")
9896
+ ] })
9897
+ ] }),
9898
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: reactComponents.tokens.spacingVerticalL }, children: [
9899
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
9900
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.ppnLabel, children: "PPN (Pajak Pertambahan Nilai) 11%" }),
9901
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.ppnValue, children: [
9902
+ "IDR.",
9903
+ taxAmount.toLocaleString("id-ID")
9904
+ ] })
9905
+ ] }),
9906
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ppnNote, children: "*PPN 11% dikenakan untuk biaya layanan dan biaya admin" })
9907
+ ] }),
9908
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, style: { marginTop: reactComponents.tokens.spacingVerticalXXL }, children: [
9909
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.grandTotalLabel, children: "Total Pembayaran" }),
9910
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.grandTotalValue, children: [
9911
+ "Rp.",
9912
+ grandTotal.toLocaleString("id-ID")
9913
+ ] })
9914
+ ] })
9915
+ ] }) }) })
9916
+ ] }) }) });
9917
+ };
9918
+ var useStyles38 = reactComponents.makeStyles({
9919
+ container: {
9920
+ display: "flex",
9921
+ flexDirection: "column",
9922
+ backgroundColor: reactComponents.tokens.colorNeutralBackground1,
9923
+ ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalL),
9924
+ ...reactComponents.shorthands.border(reactComponents.tokens.strokeWidthThin, "solid", reactComponents.tokens.colorNeutralStroke1),
9925
+ borderRadius: reactComponents.tokens.borderRadiusXLarge,
9926
+ rowGap: reactComponents.tokens.spacingHorizontalXXL,
9927
+ width: "100%"
9928
+ },
9929
+ sectionList: {
9930
+ display: "flex",
9931
+ flexDirection: "column",
9932
+ rowGap: reactComponents.tokens.spacingHorizontalXXL
9933
+ },
9934
+ sectionGap: {
9935
+ display: "flex",
9936
+ flexDirection: "column",
9937
+ rowGap: reactComponents.tokens.spacingVerticalM
9938
+ },
9939
+ labelTab: {
9940
+ fontWeight: reactComponents.tokens.fontWeightMedium,
9941
+ paddingLeft: reactComponents.tokens.spacingHorizontalMNudge
9942
+ },
9943
+ tabItem: {
9944
+ '&[aria-selected="false"]': {
9945
+ backgroundColor: "transparent"
9946
+ },
9947
+ '&[aria-selected="true"]': {
9948
+ // brandColors[140] approx #EBF3FC (light blue)
9949
+ // brandColors[80] approx #0F6CBD (primary blue)
9950
+ // Using generic tokens or hardcoded fallback if brand tokens not available here
9951
+ backgroundColor: reactComponents.tokens.colorBrandBackground2,
9952
+ color: reactComponents.tokens.colorBrandForeground1
9953
+ },
9954
+ justifyContent: "flex-start"
9955
+ },
9956
+ tabItemLogout: {
9957
+ color: reactComponents.tokens.colorPaletteRedForeground1,
9958
+ backgroundColor: "transparent",
9959
+ justifyContent: "flex-start",
9960
+ "&:hover": {
9961
+ color: reactComponents.tokens.colorPaletteRedForeground1
9962
+ }
9963
+ }
9964
+ });
9965
+ var CardProfileMenu = ({
9966
+ sections,
9967
+ selectedValue,
9968
+ onTabSelect
9969
+ }) => {
9970
+ const styles = useStyles38();
9971
+ const handleTabSelect = (_, data) => {
9972
+ onTabSelect(data.value);
9973
+ };
9974
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.container, children: /* @__PURE__ */ jsxRuntime.jsx(
9975
+ reactComponents.TabList,
9976
+ {
9977
+ vertical: true,
9978
+ appearance: "filled-circular",
9979
+ selectedValue,
9980
+ onTabSelect: handleTabSelect,
9981
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.sectionList, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sectionGap, children: [
9982
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.labelTab, children: section.sectionLabel }) }),
9983
+ section.tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
9984
+ reactComponents.Tab,
9985
+ {
9986
+ id: tab.value,
9987
+ value: tab.value,
9988
+ icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: tab.icon, width: 20, height: 20 }),
9989
+ className: tab.value === "/logout" ? styles.tabItemLogout : styles.tabItem,
9990
+ children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body2, { children: tab.label })
9991
+ },
9992
+ tab.value
9993
+ ))
9994
+ ] }, sectionIndex)) })
9995
+ }
9996
+ ) });
9997
+ };
7204
9998
 
7205
9999
  exports.BackgroundTicketCard = BackgroundTicketCard_default;
7206
10000
  exports.BackgroundTicketCardVertical = BackgroundTicketCardVertical_default;
10001
+ exports.CardAddon = CardAddon;
7207
10002
  exports.CardBanner = CardBanner;
10003
+ exports.CardBookingTicket = CardBookingTicket;
10004
+ exports.CardFAQ = CardFAQ;
10005
+ exports.CardMealCatalog = CardMealCatalog;
7208
10006
  exports.CardOrdererInfo = CardOrdererInfo;
7209
10007
  exports.CardPassengerList = CardPassengerList;
10008
+ exports.CardPaymentGuide = CardPaymentGuide;
10009
+ exports.CardPaymentInfo = CardPaymentInfo;
10010
+ exports.CardPaymentMethodList = CardPaymentMethodList;
10011
+ exports.CardPriceDetails = CardPriceDetails;
10012
+ exports.CardProfileMenu = CardProfileMenu;
7210
10013
  exports.CardPromo = CardPromo;
10014
+ exports.CardReview = CardReview;
10015
+ exports.CardReviewPassenger = CardReviewPassenger;
7211
10016
  exports.CardServiceMenu = CardServiceMenu;
10017
+ exports.CardStatusOrder = CardStatusOrder;
7212
10018
  exports.CardTicket = CardTicket;
7213
10019
  exports.CardTicketSearch = CardTicketSearch;
7214
10020
  exports.CardTicketSearchDefaultLabels = DEFAULT_LABELS;
7215
10021
  exports.CardTicketSearchSummary = CardTicketSearchSummary;
7216
10022
  exports.CardTicketSearchSummaryDefaultLabels = DEFAULT_LABELS2;
10023
+ exports.CardVehicleDetail = CardVehicleDetail;
10024
+ exports.CardVehicleOwnerForm = CardVehicleOwnerForm;
7217
10025
  exports.CarouselWithCustomNav = CarouselWithCustomNav;
7218
10026
  exports.DEFAULT_COUNTRY_CODES = DEFAULT_COUNTRY_CODES;
7219
10027
  exports.DEFAULT_DURATION_RANGE = DEFAULT_DURATION_RANGE;
@@ -7233,6 +10041,7 @@ exports.ModalFilterTicketDefaultLabels = DEFAULT_LABELS3;
7233
10041
  exports.ModalIllustration = ModalIllustration;
7234
10042
  exports.ModalListPassenger = ModalListPassenger;
7235
10043
  exports.ModalPassengerForm = ModalPassengerForm;
10044
+ exports.ModalPriceDetail = ModalPriceDetail;
7236
10045
  exports.ModalSearchHarbor = ModalSearchHarbor;
7237
10046
  exports.ModalSearchTicket = ModalSearchTicket;
7238
10047
  exports.ModalSelectDate = ModalSelectDate;