@asdp/ferryui 0.1.22-dev.10214 → 0.1.22-dev.10231

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 +54 -21
  2. package/dist/index.d.ts +54 -21
  3. package/dist/index.js +556 -178
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +556 -178
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -284,7 +284,10 @@ var sharedColors = {
284
284
  "Shared_Red_Primary": "#d13438",
285
285
  "Shared_Orange_Shade_20": "#bc4b09",
286
286
  "Shared_Orange_Tint_60": "#fff9f5",
287
- "Shared_Green_Primary": "#107c10"};
287
+ "Shared_Green_Primary": "#107c10",
288
+ "Shared_Lilac_Primary": "#b146c2",
289
+ "Shared_Lilac_Tint_40": "#e6bfed",
290
+ "Shared_Lilac_Tint_60": "#fcf6fd"};
288
291
  var foundationColors = {
289
292
  "Foundation_Danger_error": "#FD3A3A"
290
293
  };
@@ -1163,7 +1166,8 @@ var DEFAULT_LABELS5 = {
1163
1166
  timezoneLabel: "WIB",
1164
1167
  currencySymbol: "IDR",
1165
1168
  logoAlt: "Logo ASDP",
1166
- verifyingTicketButton: "Memeriksa Tiket"
1169
+ verifyingTicketButton: "Memeriksa Tiket",
1170
+ totalPriceMissing: "Lengkapi manifest barang lepas untuk melihat harga"
1167
1171
  },
1168
1172
  en: {
1169
1173
  availableSeatsLabel: "Available",
@@ -1177,7 +1181,8 @@ var DEFAULT_LABELS5 = {
1177
1181
  timezoneLabel: "WIB",
1178
1182
  currencySymbol: "IDR",
1179
1183
  logoAlt: "ASDP Logo",
1180
- verifyingTicketButton: "Verifying Ticket"
1184
+ verifyingTicketButton: "Verifying Ticket",
1185
+ totalPriceMissing: "Please complete the cargo manifest to see the price"
1181
1186
  }
1182
1187
  };
1183
1188
 
@@ -1313,7 +1318,6 @@ var useStyles5 = reactComponents.makeStyles({
1313
1318
  display: "flex",
1314
1319
  justifyContent: "space-between",
1315
1320
  alignItems: "center",
1316
- flexWrap: "wrap",
1317
1321
  [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
1318
1322
  padding: "1rem"
1319
1323
  }
@@ -1428,10 +1432,38 @@ var CardTicket = ({
1428
1432
  justifyContent: "center",
1429
1433
  gap: "1rem"
1430
1434
  },
1431
- children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
1432
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60px", height: "60px", borderRadius: "50%" } }),
1433
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100px", height: "20px", marginTop: "1rem" } })
1434
- ] })
1435
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1436
+ reactComponents.Skeleton,
1437
+ {
1438
+ style: {
1439
+ display: "flex",
1440
+ flexDirection: "column",
1441
+ alignItems: "center"
1442
+ },
1443
+ children: [
1444
+ /* @__PURE__ */ jsxRuntime.jsx(
1445
+ reactComponents.SkeletonItem,
1446
+ {
1447
+ style: {
1448
+ width: "60px",
1449
+ height: "60px",
1450
+ borderRadius: "50%"
1451
+ }
1452
+ }
1453
+ ),
1454
+ /* @__PURE__ */ jsxRuntime.jsx(
1455
+ reactComponents.SkeletonItem,
1456
+ {
1457
+ style: {
1458
+ width: "100px",
1459
+ height: "20px",
1460
+ marginTop: "1rem"
1461
+ }
1462
+ }
1463
+ )
1464
+ ]
1465
+ }
1466
+ )
1435
1467
  }
1436
1468
  ) }) : /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%" }, children: [
1437
1469
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1460,7 +1492,10 @@ var CardTicket = ({
1460
1492
  {
1461
1493
  size: "large",
1462
1494
  appearance: "filled",
1463
- style: { backgroundColor: departureItem?.availableTicket <= 0 ? reactComponents.tokens.colorNeutralForeground3 : departureItem?.provider?.serviceColor, padding: "0.5rem" },
1495
+ style: {
1496
+ backgroundColor: departureItem?.availableTicket <= 0 ? reactComponents.tokens.colorNeutralForeground3 : departureItem?.provider?.serviceColor,
1497
+ padding: "0.5rem"
1498
+ },
1464
1499
  iconPosition: "before",
1465
1500
  shape: "rounded",
1466
1501
  icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:info-24-regular" }),
@@ -1576,29 +1611,117 @@ var CardTicket = ({
1576
1611
  xxl: 4.5,
1577
1612
  xxxl: 4.5,
1578
1613
  style: { padding: 0, margin: 0 },
1579
- children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: styles.ticketMiddleCard, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", justifyContent: "space-between" }, children: [
1580
- /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "28px", borderRadius: "4px" } }) }) }),
1581
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketInfo, children: [
1582
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ticketTime, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
1583
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60px", height: "14px" } }),
1584
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "28px" } }),
1585
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "120px", height: "14px" } })
1586
- ] }) }),
1587
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketDuration, children: [
1588
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "16px", marginBottom: "8px" } }) }),
1589
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "120px", height: "2px" } }) }) })
1590
- ] }),
1591
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ticketTime, style: { alignItems: "flex-end" }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "8px" }, children: [
1592
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60px", height: "14px" } }),
1593
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "28px" } }),
1594
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "120px", height: "14px" } })
1595
- ] }) })
1596
- ] }) }),
1597
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ticketButtons, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", gap: "1rem", width: "100%" }, children: [
1598
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { flex: 1, height: "32px", borderRadius: "16px" } }),
1599
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { flex: 1, height: "32px", borderRadius: "16px" } })
1600
- ] }) })
1601
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1614
+ children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: styles.ticketMiddleCard, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(
1615
+ "div",
1616
+ {
1617
+ style: {
1618
+ display: "flex",
1619
+ flexDirection: "column",
1620
+ height: "100%",
1621
+ justifyContent: "space-between"
1622
+ },
1623
+ children: [
1624
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
1625
+ reactComponents.SkeletonItem,
1626
+ {
1627
+ style: {
1628
+ width: "80px",
1629
+ height: "28px",
1630
+ borderRadius: "4px"
1631
+ }
1632
+ }
1633
+ ) }) }),
1634
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketInfo, children: [
1635
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ticketTime, children: /* @__PURE__ */ jsxRuntime.jsxs(
1636
+ reactComponents.Skeleton,
1637
+ {
1638
+ style: {
1639
+ display: "flex",
1640
+ flexDirection: "column",
1641
+ gap: "8px"
1642
+ },
1643
+ children: [
1644
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60px", height: "14px" } }),
1645
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "28px" } }),
1646
+ /* @__PURE__ */ jsxRuntime.jsx(
1647
+ reactComponents.SkeletonItem,
1648
+ {
1649
+ style: { width: "120px", height: "14px" }
1650
+ }
1651
+ )
1652
+ ]
1653
+ }
1654
+ ) }),
1655
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketDuration, children: [
1656
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
1657
+ reactComponents.SkeletonItem,
1658
+ {
1659
+ style: {
1660
+ width: "80px",
1661
+ height: "16px",
1662
+ marginBottom: "8px"
1663
+ }
1664
+ }
1665
+ ) }),
1666
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
1667
+ reactComponents.SkeletonItem,
1668
+ {
1669
+ style: { width: "120px", height: "2px" }
1670
+ }
1671
+ ) }) })
1672
+ ] }),
1673
+ /* @__PURE__ */ jsxRuntime.jsx(
1674
+ "div",
1675
+ {
1676
+ className: styles.ticketTime,
1677
+ style: { alignItems: "flex-end" },
1678
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1679
+ reactComponents.Skeleton,
1680
+ {
1681
+ style: {
1682
+ display: "flex",
1683
+ flexDirection: "column",
1684
+ alignItems: "flex-end",
1685
+ gap: "8px"
1686
+ },
1687
+ children: [
1688
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60px", height: "14px" } }),
1689
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "28px" } }),
1690
+ /* @__PURE__ */ jsxRuntime.jsx(
1691
+ reactComponents.SkeletonItem,
1692
+ {
1693
+ style: { width: "120px", height: "14px" }
1694
+ }
1695
+ )
1696
+ ]
1697
+ }
1698
+ )
1699
+ }
1700
+ )
1701
+ ] }) }),
1702
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ticketButtons, children: /* @__PURE__ */ jsxRuntime.jsxs(
1703
+ reactComponents.Skeleton,
1704
+ {
1705
+ style: { display: "flex", gap: "1rem", width: "100%" },
1706
+ children: [
1707
+ /* @__PURE__ */ jsxRuntime.jsx(
1708
+ reactComponents.SkeletonItem,
1709
+ {
1710
+ style: { flex: 1, height: "32px", borderRadius: "16px" }
1711
+ }
1712
+ ),
1713
+ /* @__PURE__ */ jsxRuntime.jsx(
1714
+ reactComponents.SkeletonItem,
1715
+ {
1716
+ style: { flex: 1, height: "32px", borderRadius: "16px" }
1717
+ }
1718
+ )
1719
+ ]
1720
+ }
1721
+ ) })
1722
+ ]
1723
+ }
1724
+ ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1602
1725
  /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsxRuntime.jsx(
1603
1726
  reactComponents.Badge,
1604
1727
  {
@@ -1626,7 +1749,13 @@ var CardTicket = ({
1626
1749
  " ",
1627
1750
  formatDuration(departureItem?.estimatedSailingMinute)
1628
1751
  ] }),
1629
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:vehicle-ship-24-regular", height: 24 }) }) })
1752
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { children: /* @__PURE__ */ jsxRuntime.jsx(
1753
+ react.Icon,
1754
+ {
1755
+ icon: "fluent:vehicle-ship-24-regular",
1756
+ height: 24
1757
+ }
1758
+ ) }) })
1630
1759
  ] }),
1631
1760
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketTime, children: [
1632
1761
  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: departureItem?.arrivedDay }),
@@ -1647,7 +1776,10 @@ var CardTicket = ({
1647
1776
  },
1648
1777
  icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:money-24-regular" }),
1649
1778
  size: "medium",
1650
- onClick: () => onPriceDetailClick(departureItem?.billingDetail, departureItem?.provider),
1779
+ onClick: () => onPriceDetailClick(
1780
+ departureItem?.billingDetail,
1781
+ departureItem?.provider
1782
+ ),
1651
1783
  children: mergedLabels.priceDetailsButton
1652
1784
  }
1653
1785
  ),
@@ -1682,84 +1814,145 @@ var CardTicket = ({
1682
1814
  xxl: 4.5,
1683
1815
  xxxl: 4.5,
1684
1816
  style: { padding: 0, margin: 0 },
1685
- children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.ticketRightCard, style: departureItem?.availableTicket <= 0 ? { background: "linear-gradient(75deg, #7A7A7A 0%, #4D4D4D 103.3%)" } : {}, children: [
1686
- isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1687
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceCard, children: [
1688
- /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", flexDirection: "column", gap: "8px", flex: 1 }, children: [
1689
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "20px" } }),
1690
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "140px", height: "32px", borderRadius: "16px" } })
1817
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1818
+ reactComponents.Card,
1819
+ {
1820
+ className: styles.ticketRightCard,
1821
+ style: departureItem?.availableTicket <= 0 ? {
1822
+ background: "linear-gradient(75deg, #7A7A7A 0%, #4D4D4D 103.3%)"
1823
+ } : {},
1824
+ children: [
1825
+ isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1826
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceCard, children: [
1827
+ /* @__PURE__ */ jsxRuntime.jsxs(
1828
+ reactComponents.Skeleton,
1829
+ {
1830
+ style: {
1831
+ display: "flex",
1832
+ flexDirection: "column",
1833
+ gap: "8px",
1834
+ flex: 1
1835
+ },
1836
+ children: [
1837
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "20px" } }),
1838
+ /* @__PURE__ */ jsxRuntime.jsx(
1839
+ reactComponents.SkeletonItem,
1840
+ {
1841
+ style: {
1842
+ width: "140px",
1843
+ height: "32px",
1844
+ borderRadius: "16px"
1845
+ }
1846
+ }
1847
+ )
1848
+ ]
1849
+ }
1850
+ ),
1851
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
1852
+ reactComponents.SkeletonItem,
1853
+ {
1854
+ style: {
1855
+ width: "120px",
1856
+ height: "40px",
1857
+ borderRadius: "20px"
1858
+ }
1859
+ }
1860
+ ) })
1861
+ ] }),
1862
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.facilitiesSection, children: [
1863
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
1864
+ reactComponents.SkeletonItem,
1865
+ {
1866
+ style: {
1867
+ width: "80px",
1868
+ height: "20px",
1869
+ marginBottom: "8px"
1870
+ }
1871
+ }
1872
+ ) }),
1873
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.facilitiesList, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
1874
+ reactComponents.SkeletonItem,
1875
+ {
1876
+ style: { width: "100px", height: "20px" }
1877
+ }
1878
+ ) }, i)) })
1879
+ ] })
1880
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1881
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceCard, children: [
1882
+ /* @__PURE__ */ jsxRuntime.jsxs(
1883
+ "div",
1884
+ {
1885
+ style: {
1886
+ display: "flex",
1887
+ flexDirection: "column",
1888
+ gap: "0.25rem",
1889
+ flex: 1,
1890
+ minWidth: 0
1891
+ },
1892
+ children: [
1893
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: mergedLabels.totalPriceLabel }),
1894
+ departureItem?.billingDetail?.total?.formatted ? /* @__PURE__ */ jsxRuntime.jsx(
1895
+ reactComponents.Title3,
1896
+ {
1897
+ children: departureItem?.billingDetail?.total?.formatted
1898
+ }
1899
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
1900
+ reactComponents.Body1Strong,
1901
+ {
1902
+ style: { wordBreak: "break-word" },
1903
+ children: mergedLabels.totalPriceMissing
1904
+ }
1905
+ )
1906
+ ]
1907
+ }
1908
+ ),
1909
+ /* @__PURE__ */ jsxRuntime.jsx(
1910
+ reactComponents.Button,
1911
+ {
1912
+ onClick: onSelectTicket,
1913
+ appearance: "primary",
1914
+ style: isVerifyingTicket || departureItem?.availableTicket <= 0 ? { flexShrink: 0 } : { backgroundColor: brandColors["60"], flexShrink: 0 },
1915
+ size: "medium",
1916
+ shape: "circular",
1917
+ icon: isVerifyingTicket ? null : /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
1918
+ disabled: isVerifyingTicket || departureItem?.availableTicket <= 0,
1919
+ children: isVerifyingTicket ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1920
+ /* @__PURE__ */ jsxRuntime.jsx(
1921
+ reactComponents.Spinner,
1922
+ {
1923
+ size: "extra-tiny",
1924
+ style: { marginRight: "5px" }
1925
+ }
1926
+ ),
1927
+ " ",
1928
+ mergedLabels.verifyingTicketButton
1929
+ ] }) : buttonText || mergedLabels.selectTicketButton
1930
+ }
1931
+ )
1932
+ ] }),
1933
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.facilitiesSection, children: [
1934
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: mergedLabels.facilitiesLabel }),
1935
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.facilitiesList, children: departureItem?.provider?.facilities.map((facility, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.facilityItem, children: [
1936
+ /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:checkmark-circle-24-filled" }),
1937
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Strong, { children: facility })
1938
+ ] }, idx)) })
1939
+ ] })
1691
1940
  ] }),
1692
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "120px", height: "40px", borderRadius: "20px" } }) })
1693
- ] }),
1694
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.facilitiesSection, children: [
1695
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "20px", marginBottom: "8px" } }) }),
1696
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.facilitiesList, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100px", height: "20px" } }) }, i)) })
1697
- ] })
1698
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1699
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceCard, children: [
1700
- /* @__PURE__ */ jsxRuntime.jsxs(
1701
- "div",
1702
- {
1703
- style: {
1704
- display: "flex",
1705
- flexDirection: "column",
1706
- gap: "0.25rem"
1941
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Visible, { xl: true, xxl: true, xxxl: true, children: Array.from({ length: circularVerticalConfig.count }).map(
1942
+ (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
1943
+ "div",
1944
+ {
1945
+ className: styles.circularRight,
1946
+ style: {
1947
+ top: `${circularVerticalConfig.top + index * circularVerticalConfig.spacing}px`
1948
+ }
1707
1949
  },
1708
- children: [
1709
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: mergedLabels.totalPriceLabel }),
1710
- /* @__PURE__ */ jsxRuntime.jsx(
1711
- reactComponents.Title3,
1712
- {
1713
- style: {
1714
- display: "flex",
1715
- flex: "column",
1716
- justifyContent: "end"
1717
- },
1718
- children: departureItem?.billingDetail?.total?.formatted
1719
- }
1720
- )
1721
- ]
1722
- }
1723
- ),
1724
- /* @__PURE__ */ jsxRuntime.jsx(
1725
- reactComponents.Button,
1726
- {
1727
- onClick: onSelectTicket,
1728
- appearance: "primary",
1729
- style: isVerifyingTicket || departureItem?.availableTicket <= 0 ? void 0 : { backgroundColor: brandColors["60"] },
1730
- size: "medium",
1731
- shape: "circular",
1732
- icon: isVerifyingTicket ? null : /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
1733
- disabled: isVerifyingTicket || departureItem?.availableTicket <= 0,
1734
- children: isVerifyingTicket ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1735
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Spinner, { size: "extra-tiny", style: { marginRight: "5px" } }),
1736
- " ",
1737
- mergedLabels.verifyingTicketButton
1738
- ] }) : buttonText || mergedLabels.selectTicketButton
1739
- }
1740
- )
1741
- ] }),
1742
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.facilitiesSection, children: [
1743
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: mergedLabels.facilitiesLabel }),
1744
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.facilitiesList, children: departureItem?.provider?.facilities.map((facility, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.facilityItem, children: [
1745
- /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:checkmark-circle-24-filled" }),
1746
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Strong, { children: facility })
1747
- ] }, idx)) })
1748
- ] })
1749
- ] }),
1750
- /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Visible, { xl: true, xxl: true, xxxl: true, children: Array.from({ length: circularVerticalConfig.count }).map(
1751
- (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
1752
- "div",
1753
- {
1754
- className: styles.circularRight,
1755
- style: {
1756
- top: `${circularVerticalConfig.top + index * circularVerticalConfig.spacing}px`
1757
- }
1758
- },
1759
- index
1760
- )
1761
- ) })
1762
- ] })
1950
+ index
1951
+ )
1952
+ ) })
1953
+ ]
1954
+ }
1955
+ )
1763
1956
  }
1764
1957
  )
1765
1958
  ] });
@@ -14678,7 +14871,7 @@ var CardAddon = ({
14678
14871
  /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption1Stronger, { children: [
14679
14872
  mergedLabels.currencySymbol,
14680
14873
  " ",
14681
- footerData.price.toLocaleString(
14874
+ footerData.price?.toLocaleString(
14682
14875
  language === "id" ? "id-ID" : "en-US"
14683
14876
  ),
14684
14877
  footerData.priceUnit
@@ -14829,7 +15022,7 @@ var CardAddon = ({
14829
15022
  /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle1, { style: { fontSize: reactComponents.tokens.fontSizeBase600 }, children: [
14830
15023
  mergedLabels.currencySymbol,
14831
15024
  " ",
14832
- footerData.price.toLocaleString(
15025
+ footerData.price?.toLocaleString(
14833
15026
  language === "id" ? "id-ID" : "en-US"
14834
15027
  )
14835
15028
  ] })
@@ -15179,7 +15372,8 @@ var CardReview = ({
15179
15372
  items,
15180
15373
  children,
15181
15374
  className,
15182
- headerAction
15375
+ headerAction,
15376
+ isLoading = false
15183
15377
  }) => {
15184
15378
  const styles = useStyles33();
15185
15379
  const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
@@ -15190,39 +15384,60 @@ var CardReview = ({
15190
15384
  headerAction && /* @__PURE__ */ jsxRuntime.jsx("div", { children: headerAction })
15191
15385
  ] }),
15192
15386
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.contentContainer, children: [
15193
- items?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.row} ${item.className || ""}`, children: [
15194
- typeof item.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
15195
- reactComponents.Caption1,
15196
- {
15197
- className: `${styles.defaultLabel} ${item.labelClassName || ""}`,
15198
- children: item.label
15199
- }
15200
- ) : (
15201
- // Clone element to append className if it's a valid React element
15202
- React__default.default.isValidElement(item.label) ? React__default.default.cloneElement(item.label, {
15203
- className: `${styles.defaultLabel} ${item.labelClassName || ""}${item.label.props.className ? " " + item.label.props.className : ""}`
15204
- }) : /* @__PURE__ */ jsxRuntime.jsx(
15205
- "div",
15206
- {
15207
- className: `${styles.defaultLabel} ${item.labelClassName || ""}`,
15208
- children: item.label
15209
- }
15210
- )
15211
- ),
15212
- typeof item.value === "string" || typeof item.value === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
15213
- reactComponents.Body1,
15214
- {
15215
- className: `${styles.defaultValue} ${item.valueClassName || ""}`,
15216
- children: item.value
15217
- }
15218
- ) : /* @__PURE__ */ jsxRuntime.jsx(
15219
- "div",
15220
- {
15221
- className: `${styles.defaultValue} ${item.valueClassName || ""}`,
15222
- children: item.value
15223
- }
15224
- )
15225
- ] }, index)),
15387
+ isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.row, children: /* @__PURE__ */ jsxRuntime.jsxs(
15388
+ reactComponents.Skeleton,
15389
+ {
15390
+ style: { width: "100%", display: "flex", gap: "1rem" },
15391
+ children: [
15392
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "40%", height: "16px" } }),
15393
+ /* @__PURE__ */ jsxRuntime.jsx(
15394
+ reactComponents.SkeletonItem,
15395
+ {
15396
+ style: { width: "30%", height: "16px", marginLeft: "auto" }
15397
+ }
15398
+ )
15399
+ ]
15400
+ }
15401
+ ) }, index)) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
15402
+ "div",
15403
+ {
15404
+ className: `${styles.row} ${item.className || ""}`,
15405
+ children: [
15406
+ typeof item.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
15407
+ reactComponents.Caption1,
15408
+ {
15409
+ className: `${styles.defaultLabel} ${item.labelClassName || ""}`,
15410
+ children: item.label
15411
+ }
15412
+ ) : (
15413
+ // Clone element to append className if it's a valid React element
15414
+ React__default.default.isValidElement(item.label) ? React__default.default.cloneElement(item.label, {
15415
+ className: `${styles.defaultLabel} ${item.labelClassName || ""}${item.label.props.className ? " " + item.label.props.className : ""}`
15416
+ }) : /* @__PURE__ */ jsxRuntime.jsx(
15417
+ "div",
15418
+ {
15419
+ className: `${styles.defaultLabel} ${item.labelClassName || ""}`,
15420
+ children: item.label
15421
+ }
15422
+ )
15423
+ ),
15424
+ typeof item.value === "string" || typeof item.value === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
15425
+ reactComponents.Body1,
15426
+ {
15427
+ className: `${styles.defaultValue} ${item.valueClassName || ""}`,
15428
+ children: item.value
15429
+ }
15430
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
15431
+ "div",
15432
+ {
15433
+ className: `${styles.defaultValue} ${item.valueClassName || ""}`,
15434
+ children: item.value
15435
+ }
15436
+ )
15437
+ ]
15438
+ },
15439
+ index
15440
+ )) }),
15226
15441
  children
15227
15442
  ] })
15228
15443
  ] });
@@ -15311,7 +15526,8 @@ var CardReviewPassenger = ({
15311
15526
  labels,
15312
15527
  title,
15313
15528
  passengers,
15314
- className
15529
+ className,
15530
+ isLoading = false
15315
15531
  }) => {
15316
15532
  const styles = useStyles34();
15317
15533
  const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
@@ -15321,7 +15537,13 @@ var CardReviewPassenger = ({
15321
15537
  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: displayTitle }),
15322
15538
  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.titleDivider })
15323
15539
  ] }) }),
15324
- passengers.map((passenger, index) => {
15540
+ isLoading ? Array.from({ length: 2 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: styles.passengerCard, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.passengerRow, children: [
15541
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
15542
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "180px", height: "18px", marginBottom: "8px" } }),
15543
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "220px", height: "16px" } })
15544
+ ] }) }),
15545
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "90px", height: "32px" } }) }) })
15546
+ ] }) }) }, index)) : passengers.map((passenger, index) => {
15325
15547
  const badgeConfig = getBadgeConfig(passenger.serviceClass);
15326
15548
  const passengerMeta = `${passenger.ageLabel} \xB7 ${mergedLabels.idNumber} ${passenger.identityNumber}`;
15327
15549
  return /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: styles.passengerCard, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.passengerRow, children: [
@@ -15364,7 +15586,9 @@ var DEFAULT_LABELS34 = {
15364
15586
  addOnLabel: "Add On",
15365
15587
  viewDetail: "Lihat Detail",
15366
15588
  noAddOnsLabel: "Tidak ada layanan",
15367
- serviceLabel: "Layanan"
15589
+ serviceLabel: "Layanan",
15590
+ departureLabel: "Pulang Pergi (Keberangkatan)",
15591
+ returnLabel: "Pulang Pergi (Kepulangan)"
15368
15592
  },
15369
15593
  en: {
15370
15594
  title: "Booking Details",
@@ -15376,7 +15600,9 @@ var DEFAULT_LABELS34 = {
15376
15600
  addOnLabel: "Add On",
15377
15601
  viewDetail: "View Details",
15378
15602
  noAddOnsLabel: "No services",
15379
- serviceLabel: "Service"
15603
+ serviceLabel: "Service",
15604
+ departureLabel: "Round Trip (Departure)",
15605
+ returnLabel: "Round Trip (Return)"
15380
15606
  }
15381
15607
  };
15382
15608
  var useStyles35 = reactComponents.makeStyles({
@@ -15399,59 +15625,211 @@ var useStyles35 = reactComponents.makeStyles({
15399
15625
  alignItems: "center",
15400
15626
  justifyContent: "space-between",
15401
15627
  width: "100%"
15628
+ },
15629
+ badgeLilac: {
15630
+ borderRadius: reactComponents.tokens.borderRadiusXLarge,
15631
+ border: `0px solid ${sharedColors.Shared_Lilac_Tint_40}`,
15632
+ color: sharedColors.Shared_Lilac_Primary,
15633
+ backgroundColor: sharedColors.Shared_Lilac_Tint_60
15634
+ },
15635
+ badgeOrange: {
15636
+ borderRadius: reactComponents.tokens.borderRadiusXLarge,
15637
+ border: `0px solid ${reactComponents.tokens.colorStatusWarningForeground2}`,
15638
+ color: reactComponents.tokens.colorStatusWarningForeground2,
15639
+ backgroundColor: sharedColors.Shared_Orange_Tint_60
15402
15640
  }
15403
15641
  });
15642
+ var TripSection = ({ data, label, badgeClassName, mergedLabels, onViewAddOns }) => {
15643
+ const styles = useStyles35();
15644
+ return /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, direction: "column", style: { gap: reactComponents.tokens.spacingHorizontalL }, children: [
15645
+ label && /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
15646
+ reactComponents.Badge,
15647
+ {
15648
+ size: "extra-large",
15649
+ appearance: "tint",
15650
+ shape: "circular",
15651
+ className: badgeClassName,
15652
+ children: label
15653
+ }
15654
+ ) }),
15655
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { className: styles.fieldRow, children: [
15656
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.fromLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: data.from }) }) }),
15657
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.toLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: data.to }) }) })
15658
+ ] }) }),
15659
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { className: styles.fieldRow, children: [
15660
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.scheduleLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: data.scheduleTime }) }) }),
15661
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.bookingNameLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: data.bookingName }) }) })
15662
+ ] }) }),
15663
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { className: styles.fieldRow, children: [
15664
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.passengerTypeLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: data.passengerType }) }) }),
15665
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.addOnLabel, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.addOnRow, children: [
15666
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: data.addOnsCount === 0 ? mergedLabels.noAddOnsLabel : `${data.addOnsCount} ${data.addOnsCount === 1 ? mergedLabels.serviceLabel : mergedLabels.serviceLabel}` }),
15667
+ data.addOnsCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
15668
+ reactComponents.Button,
15669
+ {
15670
+ appearance: "transparent",
15671
+ onClick: onViewAddOns,
15672
+ style: { color: brandColors[80] },
15673
+ children: mergedLabels.viewDetail
15674
+ }
15675
+ )
15676
+ ] }) }) })
15677
+ ] }) })
15678
+ ] });
15679
+ };
15404
15680
  var CardReviewDetail = ({
15405
15681
  language = "id",
15406
15682
  labels,
15407
- from,
15408
- to,
15409
- scheduleTime,
15410
- bookingName,
15411
- passengerType,
15412
- addOnsCount,
15683
+ departureData,
15684
+ returnData,
15413
15685
  onViewAddOns,
15414
- className
15686
+ className,
15687
+ isLoading = false,
15688
+ isRoundTrip = false
15415
15689
  }) => {
15416
15690
  const styles = useStyles35();
15417
15691
  const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
15418
- return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs(
15692
+ return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(
15419
15693
  reactGridSystem.Row,
15420
15694
  {
15421
15695
  nogutter: true,
15422
15696
  direction: "column",
15423
15697
  style: { gap: reactComponents.tokens.spacingHorizontalL },
15424
15698
  children: [
15425
- /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.titleRow, children: [
15426
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.title }),
15427
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { style: { width: 0 } })
15428
- ] }) }),
15699
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "30%", height: "24px" } }) }) }),
15429
15700
  /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { className: styles.fieldRow, children: [
15430
- /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.fromLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: from }) }) }),
15431
- /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.toLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: to }) }) })
15701
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
15702
+ /* @__PURE__ */ jsxRuntime.jsx(
15703
+ reactComponents.SkeletonItem,
15704
+ {
15705
+ style: {
15706
+ width: "100%",
15707
+ height: "20px",
15708
+ marginBottom: "8px"
15709
+ }
15710
+ }
15711
+ ),
15712
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "20px" } })
15713
+ ] }) }),
15714
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
15715
+ /* @__PURE__ */ jsxRuntime.jsx(
15716
+ reactComponents.SkeletonItem,
15717
+ {
15718
+ style: {
15719
+ width: "100%",
15720
+ height: "20px",
15721
+ marginBottom: "8px"
15722
+ }
15723
+ }
15724
+ ),
15725
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "20px" } })
15726
+ ] }) })
15432
15727
  ] }) }),
15433
15728
  /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { className: styles.fieldRow, children: [
15434
- /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.scheduleLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: scheduleTime }) }) }),
15435
- /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.bookingNameLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: bookingName }) }) })
15729
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
15730
+ /* @__PURE__ */ jsxRuntime.jsx(
15731
+ reactComponents.SkeletonItem,
15732
+ {
15733
+ style: {
15734
+ width: "100%",
15735
+ height: "20px",
15736
+ marginBottom: "8px"
15737
+ }
15738
+ }
15739
+ ),
15740
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "20px" } })
15741
+ ] }) }),
15742
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
15743
+ /* @__PURE__ */ jsxRuntime.jsx(
15744
+ reactComponents.SkeletonItem,
15745
+ {
15746
+ style: {
15747
+ width: "100%",
15748
+ height: "20px",
15749
+ marginBottom: "8px"
15750
+ }
15751
+ }
15752
+ ),
15753
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "20px" } })
15754
+ ] }) })
15436
15755
  ] }) }),
15437
15756
  /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { className: styles.fieldRow, children: [
15438
- /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.passengerTypeLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: passengerType }) }) }),
15439
- /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.addOnLabel, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.addOnRow, children: [
15440
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: addOnsCount === 0 ? mergedLabels.noAddOnsLabel : `${addOnsCount} ${addOnsCount === 1 ? mergedLabels.serviceLabel : mergedLabels.serviceLabel}` }),
15441
- addOnsCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
15442
- reactComponents.Button,
15757
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
15758
+ /* @__PURE__ */ jsxRuntime.jsx(
15759
+ reactComponents.SkeletonItem,
15443
15760
  {
15444
- appearance: "transparent",
15445
- onClick: onViewAddOns,
15446
- style: { color: brandColors[80] },
15447
- children: mergedLabels.viewDetail
15761
+ style: {
15762
+ width: "100%",
15763
+ height: "20px",
15764
+ marginBottom: "8px"
15765
+ }
15448
15766
  }
15449
- )
15450
- ] }) }) })
15767
+ ),
15768
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "20px" } })
15769
+ ] }) }),
15770
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
15771
+ /* @__PURE__ */ jsxRuntime.jsx(
15772
+ reactComponents.SkeletonItem,
15773
+ {
15774
+ style: {
15775
+ width: "100%",
15776
+ height: "20px",
15777
+ marginBottom: "8px"
15778
+ }
15779
+ }
15780
+ ),
15781
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "20px" } })
15782
+ ] }) })
15451
15783
  ] }) })
15452
15784
  ]
15453
15785
  }
15454
- ) });
15786
+ ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
15787
+ /* @__PURE__ */ jsxRuntime.jsxs(
15788
+ reactGridSystem.Row,
15789
+ {
15790
+ nogutter: true,
15791
+ direction: "column",
15792
+ style: { gap: reactComponents.tokens.spacingHorizontalL },
15793
+ children: [
15794
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.titleRow, children: [
15795
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.title }),
15796
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { style: { width: 0 } })
15797
+ ] }) }),
15798
+ /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
15799
+ TripSection,
15800
+ {
15801
+ data: departureData,
15802
+ label: isRoundTrip ? mergedLabels.departureLabel : void 0,
15803
+ badgeClassName: isRoundTrip ? styles.badgeLilac : void 0,
15804
+ mergedLabels,
15805
+ onViewAddOns
15806
+ }
15807
+ ) })
15808
+ ]
15809
+ }
15810
+ ),
15811
+ isRoundTrip && returnData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
15812
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { style: { margin: `${reactComponents.tokens.spacingHorizontalL} 0` } }),
15813
+ /* @__PURE__ */ jsxRuntime.jsx(
15814
+ reactGridSystem.Row,
15815
+ {
15816
+ nogutter: true,
15817
+ direction: "column",
15818
+ style: { gap: reactComponents.tokens.spacingHorizontalL },
15819
+ children: /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
15820
+ TripSection,
15821
+ {
15822
+ data: returnData,
15823
+ label: mergedLabels.returnLabel,
15824
+ badgeClassName: styles.badgeOrange,
15825
+ mergedLabels,
15826
+ onViewAddOns
15827
+ }
15828
+ ) })
15829
+ }
15830
+ )
15831
+ ] })
15832
+ ] }) });
15455
15833
  };
15456
15834
 
15457
15835
  // src/components/CardPriceDetails/CardPriceDetails.constants.ts