sales-frontend-components 3.0.10 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/camera/camera.module.scss +136 -1
- package/dist/index.cjs.js +763 -436
- package/dist/index.d.ts +186 -12
- package/dist/index.esm.js +763 -437
- package/dist/modal/standard/customer-search/customer-search.module.scss +8 -0
- package/package.json +11 -11
package/dist/index.cjs.js
CHANGED
|
@@ -22,8 +22,8 @@ var styles$9 = require('./modal/pre-standard/job-vehicle-search-modal/job-vehicl
|
|
|
22
22
|
var styles$a = require('./modal/pre-standard/vehicle-search-modal/vehicle-search-modal.module.scss');
|
|
23
23
|
var styles$b = require('./modal/pre-standard/organization-search-modal/organization-search-modal.module.scss');
|
|
24
24
|
var styles$c = require('./step-indicator/step-indicator.module.scss');
|
|
25
|
-
var salesFrontendBridge = require('sales-frontend-bridge');
|
|
26
25
|
var styles$d = require('./camera/camera.module.scss');
|
|
26
|
+
var salesFrontendBridge = require('sales-frontend-bridge');
|
|
27
27
|
var remoteIdentityVerification = require('sales-frontend-headless/remote-identity-verification');
|
|
28
28
|
var styles$e = require('./terms/components/unit/terms-radio.module.scss');
|
|
29
29
|
var styles$f = require('./terms/components/unit/terms-rating-bar.module.scss');
|
|
@@ -663,12 +663,12 @@ const highlightOnSearchKeyword = (originalText, targetString) => {
|
|
|
663
663
|
return replacedText;
|
|
664
664
|
};
|
|
665
665
|
|
|
666
|
-
const cx$
|
|
666
|
+
const cx$y = classNames$1.bind(styles);
|
|
667
667
|
const { InputBox: InputBox$4, Input: Input$4 } = salesFrontendDesignSystem.FormCore;
|
|
668
668
|
const AddressSearchInitialText = () => {
|
|
669
669
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
670
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: cx$
|
|
671
|
-
/* @__PURE__ */ jsxRuntime.jsxs("ul", { className: cx$
|
|
670
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: cx$y("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
|
|
671
|
+
/* @__PURE__ */ jsxRuntime.jsxs("ul", { className: cx$y("guide"), children: [
|
|
672
672
|
/* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uB3C4\uB85C\uBA85/\uC9C0\uBA85\uACFC \uAC74\uBB3C\uBC88\uD638\uB97C \uD568\uAED8 \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
|
|
673
673
|
/* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uC608) 63\uB85C 50, \uC5EC\uC758\uB3C4\uB3D9 60" }),
|
|
674
674
|
/* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uC9C0\uBA85\uC740 \uB3D9/\uC74D/\uBA74/\uB9AC\uB85C \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
|
|
@@ -685,31 +685,32 @@ const AddressSearchResult = ({
|
|
|
685
685
|
selectedAddress
|
|
686
686
|
}) => {
|
|
687
687
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
688
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
688
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$y("guide-title"), children: [
|
|
689
689
|
"\uCD1D ",
|
|
690
690
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: addressSearchList.length }),
|
|
691
691
|
"\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
|
|
692
692
|
] }),
|
|
693
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
694
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
693
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$y("search-result-wrapper"), children: addressSearchList?.map((item, index) => {
|
|
694
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$y("search-result-row"), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
695
695
|
salesFrontendDesignSystem.Radio.Item,
|
|
696
696
|
{
|
|
697
|
-
wrapperProps: { className: cx$
|
|
697
|
+
wrapperProps: { className: cx$y("search-result-radio") },
|
|
698
698
|
id: `address-search-result--${index}`,
|
|
699
699
|
size: "medium",
|
|
700
700
|
name: "address-search",
|
|
701
|
+
clampLabel: false,
|
|
701
702
|
onChange,
|
|
702
703
|
value: String(index),
|
|
703
704
|
checked: item.firstPostalCode === selectedAddress?.firstPostalCode && item.secondPostalCode === selectedAddress?.secondPostalCode && item.roadNameBaseAddress === selectedAddress?.roadNameBaseAddress && item.roadNameDetailAddress === selectedAddress?.roadNameDetailAddress,
|
|
704
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx$
|
|
705
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
706
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
707
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx$
|
|
708
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
705
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx$y("search-result"), children: [
|
|
706
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$y("zipcode"), children: highlightOnSearchKeyword(`${item.firstPostalCode}${item.secondPostalCode}`, searchKeyword) }),
|
|
707
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$y("divider") }),
|
|
708
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx$y("address-info"), children: [
|
|
709
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$y("road-address"), children: highlightOnSearchKeyword(
|
|
709
710
|
`${item.roadNameBaseAddress} ${item.roadNameDetailAddress} ${item.mainBuildingName}`,
|
|
710
711
|
searchKeyword
|
|
711
712
|
) }),
|
|
712
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
713
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$y("land-address"), children: highlightOnSearchKeyword(
|
|
713
714
|
`${item.landNumberBaseAddress} ${item.landNumberDetailAddress}`,
|
|
714
715
|
searchKeyword
|
|
715
716
|
) })
|
|
@@ -733,20 +734,29 @@ const AddressSearchDetailInput = ({
|
|
|
733
734
|
}) => {
|
|
734
735
|
const { land, road } = selectedStandardizationAddress || {};
|
|
735
736
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
736
|
-
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "address-search-standardization", size: "medium", align: "vertical", className: "mb-xxlarge", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
{
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
737
|
+
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "address-search-standardization", size: "medium", align: "vertical", className: "mb-xxlarge", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
738
|
+
salesFrontendDesignSystem.Radio.Item,
|
|
739
|
+
{
|
|
740
|
+
wrapperProps: { className: cx$y("search-result-radio") },
|
|
741
|
+
value: "",
|
|
742
|
+
checked: true,
|
|
743
|
+
clampLabel: false,
|
|
744
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx$y("search-result"), children: [
|
|
745
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
746
|
+
"span",
|
|
747
|
+
{
|
|
748
|
+
className: cx$y("zipcode"),
|
|
749
|
+
children: `${selectedStandardizationAddress?.land?.firstPostalCode}${land?.secondPostalCode}`
|
|
750
|
+
}
|
|
751
|
+
),
|
|
752
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$y("divider") }),
|
|
753
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx$y("address-info"), children: [
|
|
754
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$y("road-address"), children: `${road?.baseAddress} ${road?.detailAddress}` }),
|
|
755
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$y("land-address"), children: `${land?.baseAddress} ${land?.detailAddress}` })
|
|
756
|
+
] })
|
|
757
|
+
] })
|
|
758
|
+
}
|
|
759
|
+
) }),
|
|
750
760
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "d-flex gap-large items-center", children: [
|
|
751
761
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.FormField.Label, { htmlFor: "detail", children: "\uC0C1\uC138\uC8FC\uC18C" }),
|
|
752
762
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -802,7 +812,7 @@ function AddressComponent({ isOpen, onClose, setValue, inputProps, inputBoxProps
|
|
|
802
812
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
|
|
803
813
|
/* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
|
|
804
814
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uC8FC\uC18C \uAC80\uC0C9", showCloseButton: true }),
|
|
805
|
-
/* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { className: cx$
|
|
815
|
+
/* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { className: cx$y("modal-body"), children: [
|
|
806
816
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
807
817
|
InputBox$4,
|
|
808
818
|
{
|
|
@@ -826,7 +836,7 @@ function AddressComponent({ isOpen, onClose, setValue, inputProps, inputBoxProps
|
|
|
826
836
|
}
|
|
827
837
|
),
|
|
828
838
|
addressSearchStep === "initial" && /* @__PURE__ */ jsxRuntime.jsx(AddressSearchInitialText, {}),
|
|
829
|
-
isLoading && /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Loading.Wait, { className: cx$
|
|
839
|
+
isLoading && /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Loading.Wait, { className: cx$y("loading") }),
|
|
830
840
|
!isLoading && addressSearchStep === "search-result" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
831
841
|
AddressSearchResult,
|
|
832
842
|
{
|
|
@@ -1497,26 +1507,26 @@ function useBankStockSearch({ onSelect, commonCodeId }) {
|
|
|
1497
1507
|
};
|
|
1498
1508
|
}
|
|
1499
1509
|
|
|
1500
|
-
const cx$
|
|
1510
|
+
const cx$x = classNames$1.bind(styles$1);
|
|
1501
1511
|
function BankStockSearchModal({ open, onClose, onSelect, commonCodeId }) {
|
|
1502
1512
|
const { bankList, stockList, handleSelect } = useBankStockSearch({
|
|
1503
1513
|
onSelect,
|
|
1504
1514
|
commonCodeId
|
|
1505
1515
|
});
|
|
1506
1516
|
const renderItems = (list) => {
|
|
1507
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
1517
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$x("grid-container"), children: list.map((item) => {
|
|
1508
1518
|
const findItem = BANK_STOCK_ICON_LIST.find((icon) => icon.codeVal === item.codeVal);
|
|
1509
1519
|
const convertedItem = findItem ? findItem : {
|
|
1510
1520
|
replaceName: item.codeName
|
|
1511
1521
|
};
|
|
1512
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("button", { className: cx$
|
|
1513
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
1522
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("button", { className: cx$x("grid-item", "text-pre-line"), onClick: () => handleSelect(item), children: [
|
|
1523
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$x("icon-box"), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1514
1524
|
"span",
|
|
1515
1525
|
{
|
|
1516
|
-
className: `${cx$
|
|
1526
|
+
className: `${cx$x("icon")} dsp-icons ${findItem?.className ?? "dsp-icons-graphics-stock-hochul-eopsum"}`
|
|
1517
1527
|
}
|
|
1518
1528
|
) }),
|
|
1519
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
1529
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$x("icon-name"), children: convertedItem?.replaceName })
|
|
1520
1530
|
] }, item.codeVal);
|
|
1521
1531
|
}) });
|
|
1522
1532
|
};
|
|
@@ -1524,13 +1534,13 @@ function BankStockSearchModal({ open, onClose, onSelect, commonCodeId }) {
|
|
|
1524
1534
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
|
|
1525
1535
|
/* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
|
|
1526
1536
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uC740\uD589/\uC99D\uAD8C\uC0AC \uC120\uD0DD", showCloseButton: true }),
|
|
1527
|
-
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
1528
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
1529
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: cx$
|
|
1537
|
+
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$x("container"), children: [
|
|
1538
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$x("section"), children: [
|
|
1539
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: cx$x("section-title"), children: "\uC740\uD589\uC0AC" }),
|
|
1530
1540
|
renderItems(bankList || [])
|
|
1531
1541
|
] }),
|
|
1532
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
1533
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: cx$
|
|
1542
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$x("section"), children: [
|
|
1543
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: cx$x("section-title"), children: "\uC99D\uAD8C\uC0AC" }),
|
|
1534
1544
|
renderItems(stockList || [])
|
|
1535
1545
|
] })
|
|
1536
1546
|
] }) })
|
|
@@ -1549,7 +1559,7 @@ const useCustomerSearch = (onSelect, options) => {
|
|
|
1549
1559
|
const [customerList, setCustomerList] = React9.useState([]);
|
|
1550
1560
|
const [selectedCustomer, setSelectedCustomer] = React9.useState(null);
|
|
1551
1561
|
const setSentryCustInfo = salesFrontendStores.useSetSentryCustInfo();
|
|
1552
|
-
const { data } = method.useSearchCustomerListQuery({ customerName: searchKeyword });
|
|
1562
|
+
const { data, isFetching } = method.useSearchCustomerListQuery({ customerName: searchKeyword });
|
|
1553
1563
|
const search = () => {
|
|
1554
1564
|
if (searchInput.length >= 2) {
|
|
1555
1565
|
setSearchKeyword(searchInput);
|
|
@@ -1602,6 +1612,7 @@ const useCustomerSearch = (onSelect, options) => {
|
|
|
1602
1612
|
searchInput,
|
|
1603
1613
|
customerList,
|
|
1604
1614
|
searchKeyword,
|
|
1615
|
+
isLoading: isFetching && searchKeyword.length > 0,
|
|
1605
1616
|
onSearchInputChange,
|
|
1606
1617
|
onKeyUp,
|
|
1607
1618
|
search,
|
|
@@ -1615,7 +1626,7 @@ const useCustomerSearch = (onSelect, options) => {
|
|
|
1615
1626
|
};
|
|
1616
1627
|
};
|
|
1617
1628
|
|
|
1618
|
-
const cx$
|
|
1629
|
+
const cx$w = classNames$1.bind(styles$2);
|
|
1619
1630
|
const { InputBox: InputBox$3, Input: Input$3 } = salesFrontendDesignSystem.FormCore;
|
|
1620
1631
|
const CustomerSearch = ({
|
|
1621
1632
|
onSelectCustomer,
|
|
@@ -1632,6 +1643,7 @@ const CustomerSearch = ({
|
|
|
1632
1643
|
searchInput,
|
|
1633
1644
|
customerList,
|
|
1634
1645
|
searchKeyword,
|
|
1646
|
+
isLoading,
|
|
1635
1647
|
onSearchInputChange,
|
|
1636
1648
|
onKeyUp,
|
|
1637
1649
|
search,
|
|
@@ -1642,8 +1654,8 @@ const CustomerSearch = ({
|
|
|
1642
1654
|
onClear();
|
|
1643
1655
|
onSearchClear?.();
|
|
1644
1656
|
};
|
|
1645
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
1646
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
1657
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$w("container"), children: [
|
|
1658
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$w("search-bar"), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1647
1659
|
InputBox$3,
|
|
1648
1660
|
{
|
|
1649
1661
|
endElement: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconMainUiSearch, { onClick: search, style: { width: "20px", height: "20px" } }),
|
|
@@ -1664,34 +1676,38 @@ const CustomerSearch = ({
|
|
|
1664
1676
|
)
|
|
1665
1677
|
}
|
|
1666
1678
|
) }),
|
|
1667
|
-
isOpen &&
|
|
1679
|
+
isOpen && searchKeyword && /* @__PURE__ */ jsxRuntime.jsx(DropDown, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$w("result-container"), children: customerList.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.List, { children: customerList.map((customer, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1668
1680
|
salesFrontendDesignSystem.ListItem,
|
|
1669
1681
|
{
|
|
1670
1682
|
onClick: () => handleSelectItem(customer),
|
|
1671
1683
|
selectable: true,
|
|
1672
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: cx$
|
|
1673
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
1674
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
1684
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: cx$w("customer-item"), children: [
|
|
1685
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$w("name"), children: highlightOnSearchKeyword(customer.customerName || "", searchKeyword) }),
|
|
1686
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$w("details"), children: [
|
|
1675
1687
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: customer.birthDate && convertDateString({
|
|
1676
1688
|
dateString: customer.birthDate,
|
|
1677
1689
|
fromFormat: "YYYYMMDD",
|
|
1678
1690
|
toFormat: "YYYY.MM.DD"
|
|
1679
1691
|
}) }),
|
|
1680
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
1692
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$w("separator"), children: "|" }),
|
|
1681
1693
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: getGenderName(customer.genderCode) }),
|
|
1682
1694
|
customer.baseAddress && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1683
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
1695
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$w("separator"), children: "|" }),
|
|
1684
1696
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: customer.baseAddress })
|
|
1685
1697
|
] })
|
|
1686
1698
|
] })
|
|
1687
1699
|
] })
|
|
1688
1700
|
},
|
|
1689
1701
|
`cust-item-${customer.customerId}-${index}`
|
|
1690
|
-
)) })
|
|
1702
|
+
)) }) : !isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$w("no-result-message"), children: [
|
|
1703
|
+
"`",
|
|
1704
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: searchKeyword }),
|
|
1705
|
+
"`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
|
|
1706
|
+
] }) }) })
|
|
1691
1707
|
] });
|
|
1692
1708
|
};
|
|
1693
1709
|
|
|
1694
|
-
const cx$
|
|
1710
|
+
const cx$v = classNames$1.bind(styles$2);
|
|
1695
1711
|
const { InputBox: InputBox$2, Input: Input$2 } = salesFrontendDesignSystem.FormCore;
|
|
1696
1712
|
function CustomerSearchModal({ isOpen, closeModal, onSelect, onSearchClear, inputProps, inputBoxProps }) {
|
|
1697
1713
|
const {
|
|
@@ -1738,12 +1754,12 @@ function CustomerSearchModal({ isOpen, closeModal, onSelect, onSearchClear, inpu
|
|
|
1738
1754
|
)
|
|
1739
1755
|
}
|
|
1740
1756
|
),
|
|
1741
|
-
searchKeyword && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$
|
|
1757
|
+
searchKeyword && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$v("result-count"), children: [
|
|
1742
1758
|
"\uCD1D ",
|
|
1743
1759
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: customerList.length }),
|
|
1744
1760
|
"\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
|
|
1745
1761
|
] }),
|
|
1746
|
-
searchKeyword && customerList.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
1762
|
+
searchKeyword && customerList.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$v("search-result"), children: [
|
|
1747
1763
|
"`",
|
|
1748
1764
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: searchKeyword }),
|
|
1749
1765
|
"`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
|
|
@@ -1759,18 +1775,18 @@ function CustomerSearchModal({ isOpen, closeModal, onSelect, onSearchClear, inpu
|
|
|
1759
1775
|
closeModal();
|
|
1760
1776
|
},
|
|
1761
1777
|
selectable: true,
|
|
1762
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
1763
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
1764
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
1778
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$v("customer-item", "modal"), children: [
|
|
1779
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$v("name"), children: highlightOnSearchKeyword(customer.customerName || "", searchKeyword) }),
|
|
1780
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$v("details", "modal"), children: [
|
|
1765
1781
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: customer.birthDate && convertDateString({
|
|
1766
1782
|
dateString: customer.birthDate,
|
|
1767
1783
|
fromFormat: "YYYYMMDD",
|
|
1768
1784
|
toFormat: "YYYY.MM.DD"
|
|
1769
1785
|
}) }),
|
|
1770
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
1786
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$v("separator"), children: "|" }),
|
|
1771
1787
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: getGenderName(customer.genderCode) }),
|
|
1772
1788
|
customer.baseAddress && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1773
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
1789
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$v("separator"), children: "|" }),
|
|
1774
1790
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: customer.baseAddress })
|
|
1775
1791
|
] })
|
|
1776
1792
|
] })
|
|
@@ -1783,7 +1799,7 @@ function CustomerSearchModal({ isOpen, closeModal, onSelect, onSearchClear, inpu
|
|
|
1783
1799
|
] });
|
|
1784
1800
|
}
|
|
1785
1801
|
|
|
1786
|
-
const cx$
|
|
1802
|
+
const cx$u = classNames$1.bind(styles$3);
|
|
1787
1803
|
const { InputBox: InputBox$1, Input: Input$1 } = salesFrontendDesignSystem.FormCore;
|
|
1788
1804
|
const favoriteList = [
|
|
1789
1805
|
{
|
|
@@ -1825,9 +1841,9 @@ const NationalitySearchInitialText = ({
|
|
|
1825
1841
|
setSearchInput(keyword);
|
|
1826
1842
|
setSearchKeyword(keyword);
|
|
1827
1843
|
};
|
|
1828
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
1829
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: cx$
|
|
1830
|
-
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$
|
|
1844
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$u("favorite-container"), children: [
|
|
1845
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: cx$u("favorite-title"), children: "\uB9CE\uC774 \uCC3E\uB294 \uAD6D\uC801" }),
|
|
1846
|
+
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$u("favorite"), children: favoriteList.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { onClick: () => set(item.nationalityCodeName), children: /* @__PURE__ */ jsxRuntime.jsx("button", { children: item.nationalityCodeName }) }, `${item.nationalityCode}-${index}`)) })
|
|
1831
1847
|
] });
|
|
1832
1848
|
};
|
|
1833
1849
|
const NationalitySearchResult = ({
|
|
@@ -1842,12 +1858,12 @@ const NationalitySearchResult = ({
|
|
|
1842
1858
|
setFilterList(filterList2);
|
|
1843
1859
|
}, [nationalityList, searchKeyWord]);
|
|
1844
1860
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4", children: [
|
|
1845
|
-
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$
|
|
1861
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$u("favorite-title"), children: [
|
|
1846
1862
|
"\uCD1D ",
|
|
1847
1863
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filterList.length }),
|
|
1848
1864
|
"\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
|
|
1849
1865
|
] }),
|
|
1850
|
-
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$
|
|
1866
|
+
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$u("favorite"), children: filterList.length > 0 && filterList.map((item, index) => {
|
|
1851
1867
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1852
1868
|
"li",
|
|
1853
1869
|
{
|
|
@@ -1860,7 +1876,7 @@ const NationalitySearchResult = ({
|
|
|
1860
1876
|
`${index}-${item.nationalityCode}`
|
|
1861
1877
|
);
|
|
1862
1878
|
}) }),
|
|
1863
|
-
filterList.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
1879
|
+
filterList.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$u("search-result"), children: [
|
|
1864
1880
|
"`",
|
|
1865
1881
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: searchKeyWord }),
|
|
1866
1882
|
"`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
|
|
@@ -1895,7 +1911,7 @@ function NationalityComponent({ isOpen, onClose, setValue, onConfirm, inputProps
|
|
|
1895
1911
|
clearable: true,
|
|
1896
1912
|
endElement: /* @__PURE__ */ jsxRuntime.jsx("button", { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconMainUiSearch, { onClick: search }) }),
|
|
1897
1913
|
onClear,
|
|
1898
|
-
className: cx$
|
|
1914
|
+
className: cx$u("search-input"),
|
|
1899
1915
|
...inputBoxProps,
|
|
1900
1916
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1901
1917
|
Input$1,
|
|
@@ -2006,7 +2022,7 @@ const useNationalityComponent = () => {
|
|
|
2006
2022
|
};
|
|
2007
2023
|
};
|
|
2008
2024
|
|
|
2009
|
-
const cx$
|
|
2025
|
+
const cx$t = classNames$1.bind(styles$4);
|
|
2010
2026
|
const AUTH_TEMPLATE_CODES = {
|
|
2011
2027
|
appInit: {
|
|
2012
2028
|
dev: {
|
|
@@ -2237,7 +2253,7 @@ function useNxlOneModal({
|
|
|
2237
2253
|
isNxlOneModalOpen: isOpen,
|
|
2238
2254
|
NxlModalComponent: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen, onClose: closeModal, modalSize, children: [
|
|
2239
2255
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
|
|
2240
|
-
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { raw: true, className: cx$
|
|
2256
|
+
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { raw: true, className: cx$t("modal-body", `modal-body-${modalSize}`), children: [
|
|
2241
2257
|
isIframeShow && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2242
2258
|
salesFrontendSolution.NxlOneIframe,
|
|
2243
2259
|
{
|
|
@@ -2247,7 +2263,7 @@ function useNxlOneModal({
|
|
|
2247
2263
|
env: nxlOnePropsState.env,
|
|
2248
2264
|
bizCode: nxlOnePropsState.bizCode || bizCode,
|
|
2249
2265
|
tmplCode: nxlOnePropsState.tmplCode || tmplCode,
|
|
2250
|
-
className: cx$
|
|
2266
|
+
className: cx$t("nxl-one-iframe"),
|
|
2251
2267
|
onSuccess: (result) => {
|
|
2252
2268
|
onSuccess(result);
|
|
2253
2269
|
setIsIframeShow(false);
|
|
@@ -2259,16 +2275,16 @@ function useNxlOneModal({
|
|
|
2259
2275
|
}
|
|
2260
2276
|
}
|
|
2261
2277
|
),
|
|
2262
|
-
!isIframeShow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
2278
|
+
!isIframeShow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$t("nxl-one-iframe") })
|
|
2263
2279
|
] }) })
|
|
2264
2280
|
] })
|
|
2265
2281
|
};
|
|
2266
2282
|
}
|
|
2267
2283
|
|
|
2268
|
-
const cx$
|
|
2284
|
+
const cx$s = classNames$1.bind(styles$5);
|
|
2269
2285
|
const { InputBox, Input } = salesFrontendDesignSystem.FormCore;
|
|
2270
2286
|
const VisaSearchInitialText = ({ visaList, onSelect, onConfirm }) => {
|
|
2271
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
2287
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$s("favorite-container"), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$s("favorite"), children: visaList.map((item, index) => {
|
|
2272
2288
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2273
2289
|
"li",
|
|
2274
2290
|
{
|
|
@@ -2289,12 +2305,12 @@ const VisaSearchResult = ({ visaList, searchKeyword, onSelect, onConfirm }) => {
|
|
|
2289
2305
|
setFilterList(filterList2);
|
|
2290
2306
|
}, [visaList, searchKeyword]);
|
|
2291
2307
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4", children: [
|
|
2292
|
-
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$
|
|
2308
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$s("favorite-title"), children: [
|
|
2293
2309
|
"\uCD1D ",
|
|
2294
2310
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filterList.length }),
|
|
2295
2311
|
"\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
|
|
2296
2312
|
] }),
|
|
2297
|
-
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$
|
|
2313
|
+
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$s("favorite"), children: filterList.length > 0 && filterList.map((item, index) => {
|
|
2298
2314
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2299
2315
|
"li",
|
|
2300
2316
|
{
|
|
@@ -2307,7 +2323,7 @@ const VisaSearchResult = ({ visaList, searchKeyword, onSelect, onConfirm }) => {
|
|
|
2307
2323
|
`${index}-${item.integrationCodeValueName}`
|
|
2308
2324
|
);
|
|
2309
2325
|
}) }),
|
|
2310
|
-
filterList.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
2326
|
+
filterList.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$s("search-result"), children: [
|
|
2311
2327
|
"`",
|
|
2312
2328
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: searchKeyword }),
|
|
2313
2329
|
"`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
|
|
@@ -2331,7 +2347,7 @@ function VisaComponent({ isOpen, onClose, setValue, onConfirm, inputProps, input
|
|
|
2331
2347
|
clearable: true,
|
|
2332
2348
|
endElement: /* @__PURE__ */ jsxRuntime.jsx("button", { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconMainUiSearch, { onClick: search }) }),
|
|
2333
2349
|
onClear,
|
|
2334
|
-
className: cx$
|
|
2350
|
+
className: cx$s("search-input"),
|
|
2335
2351
|
...inputBoxProps,
|
|
2336
2352
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2337
2353
|
Input,
|
|
@@ -2443,30 +2459,30 @@ const useVisaComponent = () => {
|
|
|
2443
2459
|
};
|
|
2444
2460
|
};
|
|
2445
2461
|
|
|
2446
|
-
const cx$
|
|
2462
|
+
const cx$r = classNames$1.bind(styles$6);
|
|
2447
2463
|
function DeaCustomerSearchResult({
|
|
2448
2464
|
customerList,
|
|
2449
2465
|
onCustomerSelect,
|
|
2450
2466
|
selectedCustomer
|
|
2451
2467
|
}) {
|
|
2452
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
2453
|
-
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$
|
|
2468
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$r("result-section"), children: [
|
|
2469
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$r("result-title"), children: [
|
|
2454
2470
|
"\uCD1D ",
|
|
2455
2471
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: customerList.length }),
|
|
2456
2472
|
"\uAC74"
|
|
2457
2473
|
] }),
|
|
2458
2474
|
/* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Table, { variant: "vertical", style: { tableLayout: "fixed" }, height: "292px", children: [
|
|
2459
2475
|
/* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
|
|
2460
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$
|
|
2461
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$
|
|
2462
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$
|
|
2463
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$
|
|
2464
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$
|
|
2465
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$
|
|
2466
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$
|
|
2476
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$r("th-padding", "select-col"), children: "\uC120\uD0DD" }),
|
|
2477
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$r("th-padding"), children: "\uACE0\uAC1DID" }),
|
|
2478
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$r("th-padding"), children: "\uACE0\uAC1D\uBA85" }),
|
|
2479
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$r("th-padding"), children: "\uC8FC\uBBFC\uB4F1\uB85D\uBC88\uD638" }),
|
|
2480
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$r("th-padding"), children: "\uC9C1\uC885\uC5C5\uC885\uBA85" }),
|
|
2481
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$r("th-padding"), children: "\uC804\uD654\uBC88\uD638" }),
|
|
2482
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$r("th-padding"), children: "\uC8FC\uC18C" })
|
|
2467
2483
|
] }) }),
|
|
2468
2484
|
/* @__PURE__ */ jsxRuntime.jsx("tbody", { children: customerList.length > 0 ? customerList.map((customer, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
|
|
2469
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { className: cx$
|
|
2485
|
+
/* @__PURE__ */ jsxRuntime.jsx("td", { className: cx$r("radio-cell"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "d-flex-center-center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2470
2486
|
salesFrontendDesignSystem.Radio.Item,
|
|
2471
2487
|
{
|
|
2472
2488
|
id: `radio-${index}`,
|
|
@@ -2485,7 +2501,7 @@ function DeaCustomerSearchResult({
|
|
|
2485
2501
|
/* @__PURE__ */ jsxRuntime.jsx("td", { children: customer.occupationKindName }),
|
|
2486
2502
|
/* @__PURE__ */ jsxRuntime.jsx("td", { children: customer.mobilePhoneNumber }),
|
|
2487
2503
|
/* @__PURE__ */ jsxRuntime.jsx("td", { children: customer.address })
|
|
2488
|
-
] }, `cust-item-${customer.customerId}-${index}`)) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
2504
|
+
] }, `cust-item-${customer.customerId}-${index}`)) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$r("no-result"), children: [
|
|
2489
2505
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconGraphicsFeedbackEmpty, {}),
|
|
2490
2506
|
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uC870\uD68C \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
|
|
2491
2507
|
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uC785\uB825\uD55C \uC815\uBCF4\uB97C \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694." })
|
|
@@ -2495,7 +2511,7 @@ function DeaCustomerSearchResult({
|
|
|
2495
2511
|
}
|
|
2496
2512
|
|
|
2497
2513
|
const { TextField: TextField$3 } = salesFrontendDesignSystem.FormField;
|
|
2498
|
-
const cx$
|
|
2514
|
+
const cx$q = classNames$1.bind(styles$6);
|
|
2499
2515
|
function DeaCustomerSearch({
|
|
2500
2516
|
setSearchParams,
|
|
2501
2517
|
customerList,
|
|
@@ -2566,15 +2582,15 @@ function DeaCustomerSearch({
|
|
|
2566
2582
|
}
|
|
2567
2583
|
}, [initSearchParams]);
|
|
2568
2584
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2569
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
2570
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
2571
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
2585
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$q("search-section"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$q("search-filters"), children: [
|
|
2586
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$q("search-filters-wrap"), children: [
|
|
2587
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$q("search-filter-section", "flex-1"), children: [
|
|
2572
2588
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.FormField.Label, { className: "subtitle3 text-body-1", children: "\uACE0\uAC1D \uAD6C\uBD84" }),
|
|
2573
2589
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Select, { value: "personal", placeholder: "\uAC1C\uC778", disabled: true, size: "small", className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Select.Option, { value: "personal", children: "\uAC1C\uC778" }) })
|
|
2574
2590
|
] }),
|
|
2575
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
2591
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$q("search-filter-section", "flex-2"), children: [
|
|
2576
2592
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.FormField.Label, { className: "subtitle3 text-body-1", children: "\uC8FC\uBBFC\uB4F1\uB85D\uBC88\uD638" }),
|
|
2577
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
2593
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$q("resident-number-inputs"), children: [
|
|
2578
2594
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2579
2595
|
TextField$3,
|
|
2580
2596
|
{
|
|
@@ -2588,7 +2604,7 @@ function DeaCustomerSearch({
|
|
|
2588
2604
|
onKeyDown,
|
|
2589
2605
|
onFocus: onFocusResidentFrontInput,
|
|
2590
2606
|
rootProps: {
|
|
2591
|
-
className: cx$
|
|
2607
|
+
className: cx$q("search-input"),
|
|
2592
2608
|
onClear: () => {
|
|
2593
2609
|
setResidentNumberFront("");
|
|
2594
2610
|
}
|
|
@@ -2612,16 +2628,16 @@ function DeaCustomerSearch({
|
|
|
2612
2628
|
onFocus: onFocusResidentBackInput,
|
|
2613
2629
|
rootProps: {
|
|
2614
2630
|
clearable: false,
|
|
2615
|
-
className: cx$
|
|
2631
|
+
className: cx$q("search-input")
|
|
2616
2632
|
}
|
|
2617
2633
|
}
|
|
2618
2634
|
)
|
|
2619
2635
|
] })
|
|
2620
2636
|
] })
|
|
2621
2637
|
] }),
|
|
2622
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
2638
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$q("search-buttons"), children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { appearance: "filled", size: "small", variant: "primary", className: "button", onClick: handleSearch, children: "\uC870\uD68C" }) })
|
|
2623
2639
|
] }) }),
|
|
2624
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
2640
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$q("divider") }),
|
|
2625
2641
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2626
2642
|
DeaCustomerSearchResult,
|
|
2627
2643
|
{
|
|
@@ -2734,28 +2750,28 @@ const EMPLOYEE_SEARCH_TABS = [
|
|
|
2734
2750
|
{ value: "WKIS", label: "\uB0B4\uADFC" }
|
|
2735
2751
|
];
|
|
2736
2752
|
|
|
2737
|
-
const cx$
|
|
2753
|
+
const cx$p = classNames$1.bind(styles$7);
|
|
2738
2754
|
function EmployeeSearchResult({
|
|
2739
2755
|
filteredEmployees,
|
|
2740
2756
|
onEmployeeSelect,
|
|
2741
2757
|
selectedEmployee
|
|
2742
2758
|
}) {
|
|
2743
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
2744
|
-
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$
|
|
2759
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$p("result-section"), children: [
|
|
2760
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$p("result-title"), children: [
|
|
2745
2761
|
"\uCD1D ",
|
|
2746
2762
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filteredEmployees.length }),
|
|
2747
2763
|
"\uAC74"
|
|
2748
2764
|
] }),
|
|
2749
2765
|
/* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Table, { variant: "vertical", style: { tableLayout: "fixed" }, height: "292px", children: [
|
|
2750
2766
|
/* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
|
|
2751
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$
|
|
2752
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$
|
|
2753
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$
|
|
2754
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$
|
|
2755
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$
|
|
2767
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$p("th-padding", "select-col"), children: "\uC120\uD0DD" }),
|
|
2768
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$p("th-padding"), children: "\uC0AC\uC6D0\uBC88\uD638" }),
|
|
2769
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$p("th-padding"), children: "\uC0AC\uC6D0\uBA85" }),
|
|
2770
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$p("th-padding"), children: "\uC18C\uC18D\uAE30\uAD00\uBA85" }),
|
|
2771
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$p("th-padding"), children: "\uC0AC\uC6D0\uAD6C\uBD84" })
|
|
2756
2772
|
] }) }),
|
|
2757
2773
|
/* @__PURE__ */ jsxRuntime.jsx("tbody", { children: filteredEmployees.length > 0 ? filteredEmployees.map((employee, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
|
|
2758
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
2774
|
+
/* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$p("td-padding"), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2759
2775
|
salesFrontendDesignSystem.Radio.Item,
|
|
2760
2776
|
{
|
|
2761
2777
|
id: `radio-${index}`,
|
|
@@ -2768,11 +2784,11 @@ function EmployeeSearchResult({
|
|
|
2768
2784
|
}
|
|
2769
2785
|
}
|
|
2770
2786
|
) }) }),
|
|
2771
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
2772
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
2773
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
2774
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
2775
|
-
] }, `${employee.employeeNumber}-${index}`)) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 5, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
2787
|
+
/* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$p("td-padding"), children: employee.employeeNumber }) }),
|
|
2788
|
+
/* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$p("td-padding"), children: employee.employeeName }) }),
|
|
2789
|
+
/* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$p("td-padding"), children: employee.organizationName }) }),
|
|
2790
|
+
/* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$p("td-padding"), children: employee.employeeDivisionCodeName }) })
|
|
2791
|
+
] }, `${employee.employeeNumber}-${index}`)) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 5, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$p("no-result"), children: [
|
|
2776
2792
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconGraphicsFeedbackEmpty, {}),
|
|
2777
2793
|
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uC870\uD68C \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
|
|
2778
2794
|
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uC785\uB825\uD55C \uC815\uBCF4\uB97C \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694." })
|
|
@@ -2782,7 +2798,7 @@ function EmployeeSearchResult({
|
|
|
2782
2798
|
}
|
|
2783
2799
|
|
|
2784
2800
|
const { TextField: TextField$2 } = salesFrontendDesignSystem.FormField;
|
|
2785
|
-
const cx$
|
|
2801
|
+
const cx$o = classNames$1.bind(styles$7);
|
|
2786
2802
|
function EmployeeSearch({
|
|
2787
2803
|
activeTab,
|
|
2788
2804
|
onTabChange,
|
|
@@ -2801,9 +2817,9 @@ function EmployeeSearch({
|
|
|
2801
2817
|
setSearchInput("");
|
|
2802
2818
|
};
|
|
2803
2819
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2804
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
2805
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
2806
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
2820
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$o("search-section"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$o("search-filters"), children: [
|
|
2821
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$o("search-filters-wrap"), children: [
|
|
2822
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$o("search-filter-section", "flex-1"), children: [
|
|
2807
2823
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.FormField.Label, { className: "subtitle3 text-body-1", children: "\uC131\uBA85/\uC0AC\uBC88" }),
|
|
2808
2824
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2809
2825
|
TextField$2,
|
|
@@ -2816,12 +2832,12 @@ function EmployeeSearch({
|
|
|
2816
2832
|
rootProps: {
|
|
2817
2833
|
onClear: handleReset,
|
|
2818
2834
|
clearable: true,
|
|
2819
|
-
className: cx$
|
|
2835
|
+
className: cx$o("search-input")
|
|
2820
2836
|
}
|
|
2821
2837
|
}
|
|
2822
2838
|
)
|
|
2823
2839
|
] }),
|
|
2824
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
2840
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$o("search-filter-section"), children: [
|
|
2825
2841
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.FormField.Label, { className: "subtitle3 text-body-1", children: "\uC0AC\uC6D0 \uAD6C\uBD84" }),
|
|
2826
2842
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2827
2843
|
salesFrontendDesignSystem.Select,
|
|
@@ -2835,7 +2851,7 @@ function EmployeeSearch({
|
|
|
2835
2851
|
)
|
|
2836
2852
|
] })
|
|
2837
2853
|
] }),
|
|
2838
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
2854
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$o("search-buttons"), children: [
|
|
2839
2855
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2840
2856
|
salesFrontendDesignSystem.Button,
|
|
2841
2857
|
{
|
|
@@ -2843,14 +2859,14 @@ function EmployeeSearch({
|
|
|
2843
2859
|
size: "small",
|
|
2844
2860
|
variant: "secondary",
|
|
2845
2861
|
onClick: handleReset,
|
|
2846
|
-
className: cx$
|
|
2862
|
+
className: cx$o("button"),
|
|
2847
2863
|
children: "\uCD08\uAE30\uD654"
|
|
2848
2864
|
}
|
|
2849
2865
|
),
|
|
2850
|
-
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { appearance: "filled", size: "small", variant: "primary", onClick: handleSearch, className: cx$
|
|
2866
|
+
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { appearance: "filled", size: "small", variant: "primary", onClick: handleSearch, className: cx$o("button"), children: "\uC870\uD68C" })
|
|
2851
2867
|
] })
|
|
2852
2868
|
] }) }),
|
|
2853
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
2869
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$o("divider") }),
|
|
2854
2870
|
searchTerm && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2855
2871
|
EmployeeSearchResult,
|
|
2856
2872
|
{
|
|
@@ -3012,15 +3028,15 @@ function JobSearchDetail({ occupationTypeCode, occupationIndustryCode }) {
|
|
|
3012
3028
|
] }) }) });
|
|
3013
3029
|
}
|
|
3014
3030
|
|
|
3015
|
-
const cx$
|
|
3031
|
+
const cx$n = classNames$1.bind(styles$8);
|
|
3016
3032
|
function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
|
|
3017
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3018
|
-
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$
|
|
3033
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$n("category-section"), children: [
|
|
3034
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$n("result-title"), children: [
|
|
3019
3035
|
"\uCD1D ",
|
|
3020
3036
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filteredJobs.length }),
|
|
3021
3037
|
"\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
|
|
3022
3038
|
] }),
|
|
3023
|
-
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", align: "vertical", className: cx$
|
|
3039
|
+
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", align: "vertical", className: cx$n("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3024
3040
|
salesFrontendDesignSystem.Accordion.Item,
|
|
3025
3041
|
{
|
|
3026
3042
|
id: `item-${job.occupationIndustryCode}-${index}-accordion`,
|
|
@@ -3050,24 +3066,24 @@ function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
|
|
|
3050
3066
|
] }) });
|
|
3051
3067
|
}
|
|
3052
3068
|
|
|
3053
|
-
const cx$
|
|
3069
|
+
const cx$m = classNames$1.bind(styles$8);
|
|
3054
3070
|
function JobSearchFavorite({ filteredJobs, onJobSelect }) {
|
|
3055
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3071
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$m("popular-jobs"), children: [
|
|
3056
3072
|
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uB9CE\uC774 \uCC3E\uB294 \uC9C1\uC885" }),
|
|
3057
|
-
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", align: "vertical", className: cx$
|
|
3073
|
+
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", align: "vertical", className: cx$m("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3058
3074
|
salesFrontendDesignSystem.Accordion.Item,
|
|
3059
3075
|
{
|
|
3060
3076
|
id: `item-${job.occupationIndustryCode}-${index}`,
|
|
3061
|
-
className: cx$
|
|
3077
|
+
className: cx$m("accordion-item"),
|
|
3062
3078
|
children: [
|
|
3063
|
-
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.HeaderDiv, { className: cx$
|
|
3079
|
+
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.HeaderDiv, { className: cx$m("accordion-header-item"), children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3064
3080
|
salesFrontendDesignSystem.Radio.Item,
|
|
3065
3081
|
{
|
|
3066
3082
|
size: "small",
|
|
3067
3083
|
id: `item-radio-${job.occupationIndustryCode}-${index}`,
|
|
3068
3084
|
value: job.occupationIndustryCode,
|
|
3069
3085
|
onChange: () => onJobSelect(job),
|
|
3070
|
-
className: cx$
|
|
3086
|
+
className: cx$m("radio-item"),
|
|
3071
3087
|
children: [
|
|
3072
3088
|
job.occupationIndustryName,
|
|
3073
3089
|
"(",
|
|
@@ -3090,15 +3106,15 @@ function JobSearchFavorite({ filteredJobs, onJobSelect }) {
|
|
|
3090
3106
|
] }) });
|
|
3091
3107
|
}
|
|
3092
3108
|
|
|
3093
|
-
const cx$
|
|
3109
|
+
const cx$l = classNames$1.bind(styles$8);
|
|
3094
3110
|
function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
|
|
3095
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3096
|
-
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$
|
|
3111
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$l("popular-jobs"), children: [
|
|
3112
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$l("result-title"), children: [
|
|
3097
3113
|
"\uCD1D ",
|
|
3098
3114
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filteredJobs.length }),
|
|
3099
3115
|
"\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
|
|
3100
3116
|
] }),
|
|
3101
|
-
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", align: "vertical", className: cx$
|
|
3117
|
+
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", align: "vertical", className: cx$l("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3102
3118
|
salesFrontendDesignSystem.Accordion.Item,
|
|
3103
3119
|
{
|
|
3104
3120
|
id: `item-${job.occupationIndustryCode}`,
|
|
@@ -3135,7 +3151,7 @@ function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
|
|
|
3135
3151
|
}
|
|
3136
3152
|
|
|
3137
3153
|
const { TextField: TextField$1 } = salesFrontendDesignSystem.FormField;
|
|
3138
|
-
const cx$
|
|
3154
|
+
const cx$k = classNames$1.bind(styles$8);
|
|
3139
3155
|
const { Option } = salesFrontendDesignSystem.Select;
|
|
3140
3156
|
function JobSearch({
|
|
3141
3157
|
activeTab,
|
|
@@ -3173,7 +3189,7 @@ function JobSearch({
|
|
|
3173
3189
|
}
|
|
3174
3190
|
),
|
|
3175
3191
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
3176
|
-
activeTab === "jobName" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3192
|
+
activeTab === "jobName" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$k("favorite-jobs-section"), children: [
|
|
3177
3193
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3178
3194
|
TextField$1,
|
|
3179
3195
|
{
|
|
@@ -3195,8 +3211,8 @@ function JobSearch({
|
|
|
3195
3211
|
!searchTerm && /* @__PURE__ */ jsxRuntime.jsx(JobSearchFavorite, { filteredJobs, onJobSelect }),
|
|
3196
3212
|
searchTerm && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(JobSearchResult, { filteredJobs, onJobSelect, searchTerm })
|
|
3197
3213
|
] }),
|
|
3198
|
-
activeTab === "jobCode" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3199
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3214
|
+
activeTab === "jobCode" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$k("select-jobs-section"), children: [
|
|
3215
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$k("category-section"), children: [
|
|
3200
3216
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3201
3217
|
salesFrontendDesignSystem.Select,
|
|
3202
3218
|
{
|
|
@@ -3488,20 +3504,20 @@ function useJobSearchModal() {
|
|
|
3488
3504
|
};
|
|
3489
3505
|
}
|
|
3490
3506
|
|
|
3491
|
-
const cx$
|
|
3507
|
+
const cx$j = classNames$1.bind(styles$9);
|
|
3492
3508
|
const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
|
|
3493
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3494
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3509
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$j("grade-section"), children: [
|
|
3510
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$j("icon-title"), children: [
|
|
3495
3511
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconIllustGrade, {}),
|
|
3496
3512
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-title5 text-body", children: "\uB4F1\uAE09" })
|
|
3497
3513
|
] }),
|
|
3498
3514
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "typo-body2 text-body_3", children: "\uC9C1\uC885, \uC6B4\uC804 \uC5EC\uBD80 \uC120\uD0DD\uC2DC \uC790\uB3D9\uC73C\uB85C \uC0B0\uC815\uB429\uB2C8\uB2E4." }),
|
|
3499
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3500
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3515
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$j("grade-list"), children: [
|
|
3516
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$j("grade"), children: [
|
|
3501
3517
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uC704\uD5D8\uB4F1\uAE09" }),
|
|
3502
3518
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary typo-subtitle3", children: riskGrade || "-" })
|
|
3503
3519
|
] }),
|
|
3504
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3520
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$j("grade"), children: [
|
|
3505
3521
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uC785\uC6D0\uB4F1\uAE09" }),
|
|
3506
3522
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary typo-subtitle3", children: hospitalizationGrade || "-" })
|
|
3507
3523
|
] })
|
|
@@ -3509,9 +3525,9 @@ const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
|
|
|
3509
3525
|
] });
|
|
3510
3526
|
};
|
|
3511
3527
|
|
|
3512
|
-
const cx$
|
|
3528
|
+
const cx$i = classNames$1.bind(styles$a);
|
|
3513
3529
|
function VehicleSearch({ vehicles, onVehicleSelect, selectedVehicle }) {
|
|
3514
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3530
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$i("vehicle-search-section"), children: [
|
|
3515
3531
|
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uC6B4\uC804 \uCC28\uC885" }),
|
|
3516
3532
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3517
3533
|
salesFrontendDesignSystem.Radio.Root,
|
|
@@ -3519,7 +3535,7 @@ function VehicleSearch({ vehicles, onVehicleSelect, selectedVehicle }) {
|
|
|
3519
3535
|
name: "vehicle-selection",
|
|
3520
3536
|
size: "small",
|
|
3521
3537
|
align: "vertical",
|
|
3522
|
-
className: cx$
|
|
3538
|
+
className: cx$i("vehicle-radio-root"),
|
|
3523
3539
|
defaultValue: selectedVehicle?.integrationCodeValue || "",
|
|
3524
3540
|
children: vehicles.map((vehicle, index) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3525
3541
|
salesFrontendDesignSystem.Radio.Item,
|
|
@@ -3534,7 +3550,7 @@ function VehicleSearch({ vehicles, onVehicleSelect, selectedVehicle }) {
|
|
|
3534
3550
|
onVehicleSelect(selected);
|
|
3535
3551
|
}
|
|
3536
3552
|
},
|
|
3537
|
-
className: cx$
|
|
3553
|
+
className: cx$i("item"),
|
|
3538
3554
|
children: [
|
|
3539
3555
|
vehicle.integrationCodeValueName,
|
|
3540
3556
|
"(",
|
|
@@ -3613,7 +3629,7 @@ const useJobVehicleSearch = () => {
|
|
|
3613
3629
|
};
|
|
3614
3630
|
};
|
|
3615
3631
|
|
|
3616
|
-
const cx$
|
|
3632
|
+
const cx$h = classNames$1.bind(styles$9);
|
|
3617
3633
|
function useJobVehicleSearchModal() {
|
|
3618
3634
|
const {
|
|
3619
3635
|
selectedVehicle,
|
|
@@ -3682,18 +3698,18 @@ function useJobVehicleSearchModal() {
|
|
|
3682
3698
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
|
|
3683
3699
|
/* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { style: { height: "697px" }, children: [
|
|
3684
3700
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uC9C1\uC885\xB7\uC6B4\uC804\uCC28\uC885 \uAC80\uC0C9", showCloseButton: true }),
|
|
3685
|
-
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { className: cx$
|
|
3686
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3687
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3701
|
+
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { className: cx$h("job-vehicle-search-modal"), raw: true, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3702
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$h("left-panel"), children: [
|
|
3703
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$h("card-section"), children: [
|
|
3688
3704
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3689
3705
|
"div",
|
|
3690
3706
|
{
|
|
3691
|
-
className: cx$
|
|
3707
|
+
className: cx$h("card-menu", { "card-selected": rightPanelView === "jobSearch" }),
|
|
3692
3708
|
onClick: () => setRightPanelView("jobSearch"),
|
|
3693
3709
|
children: [
|
|
3694
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3695
|
-
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconIllustJob, { className: cx$
|
|
3696
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
3710
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$h("card-title"), children: [
|
|
3711
|
+
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconIllustJob, { className: cx$h("card-icon") }),
|
|
3712
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$h("card-text", "typo-title5", "text-body"), children: "\uC9C1\uC885" }),
|
|
3697
3713
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconSubUiArrowRight, {})
|
|
3698
3714
|
] }),
|
|
3699
3715
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "typo-body2 text-body_2", children: selectedJob ? selectedJob.occupationIndustryName : "\uBBF8\uC120\uD0DD" })
|
|
@@ -3703,12 +3719,12 @@ function useJobVehicleSearchModal() {
|
|
|
3703
3719
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3704
3720
|
"div",
|
|
3705
3721
|
{
|
|
3706
|
-
className: cx$
|
|
3722
|
+
className: cx$h("card-menu", { "card-selected": rightPanelView === "vehicleSelection" }),
|
|
3707
3723
|
onClick: () => setRightPanelView("vehicleSelection"),
|
|
3708
3724
|
children: [
|
|
3709
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3710
|
-
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconIllustVehicle, { className: cx$
|
|
3711
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
3725
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$h("card-title"), children: [
|
|
3726
|
+
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconIllustVehicle, { className: cx$h("card-icon") }),
|
|
3727
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$h("card-text", "typo-title5", "text-body"), children: "\uC6B4\uC804 \uC5EC\uBD80\xB7\uCC28\uC885" }),
|
|
3712
3728
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconSubUiArrowRight, {})
|
|
3713
3729
|
] }),
|
|
3714
3730
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "typo-body2 text-body_2", children: [
|
|
@@ -3721,7 +3737,7 @@ function useJobVehicleSearchModal() {
|
|
|
3721
3737
|
] }),
|
|
3722
3738
|
/* @__PURE__ */ jsxRuntime.jsx(JobVehicleSearchGrade, { riskGrade, hospitalizationGrade })
|
|
3723
3739
|
] }),
|
|
3724
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
3740
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$h("right-panel"), children: rightPanelView === "jobSearch" ? JobSearch : VehicleSearch })
|
|
3725
3741
|
] }) }),
|
|
3726
3742
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Footer, { style: { marginTop: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3727
3743
|
salesFrontendDesignSystem.Button,
|
|
@@ -3744,27 +3760,27 @@ function useJobVehicleSearchModal() {
|
|
|
3744
3760
|
};
|
|
3745
3761
|
}
|
|
3746
3762
|
|
|
3747
|
-
const cx$
|
|
3763
|
+
const cx$g = classNames$1.bind(styles$b);
|
|
3748
3764
|
function OrganizationSearchResult({
|
|
3749
3765
|
filteredOrganizations,
|
|
3750
3766
|
selectedOrganization,
|
|
3751
3767
|
onOrganizationSelect
|
|
3752
3768
|
}) {
|
|
3753
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3754
|
-
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$
|
|
3769
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$g("result-section"), children: [
|
|
3770
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$g("result-title"), children: [
|
|
3755
3771
|
"\uCD1D ",
|
|
3756
3772
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filteredOrganizations.length }),
|
|
3757
3773
|
"\uAC74"
|
|
3758
3774
|
] }),
|
|
3759
3775
|
/* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Table, { variant: "vertical", style: { tableLayout: "fixed" }, height: "292px", children: [
|
|
3760
3776
|
/* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
|
|
3761
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$
|
|
3762
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$
|
|
3763
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$
|
|
3764
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$
|
|
3777
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$g("th-padding", "select-col"), children: "\uC120\uD0DD" }),
|
|
3778
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$g("th-padding"), children: "\uAE30\uAD00\uCF54\uB4DC" }),
|
|
3779
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$g("th-padding"), children: "\uAE30\uAD00\uC774\uB984" }),
|
|
3780
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$g("th-padding"), children: "\uD3D0\uC1C4\uC77C\uC790" })
|
|
3765
3781
|
] }) }),
|
|
3766
3782
|
/* @__PURE__ */ jsxRuntime.jsx("tbody", { children: filteredOrganizations.length > 0 ? filteredOrganizations.map((organization, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
|
|
3767
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
3783
|
+
/* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$g("td-padding"), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3768
3784
|
salesFrontendDesignSystem.Radio.Item,
|
|
3769
3785
|
{
|
|
3770
3786
|
id: `radio-${index}`,
|
|
@@ -3780,7 +3796,7 @@ function OrganizationSearchResult({
|
|
|
3780
3796
|
/* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "td-padding", children: organization.organizationCode }) }),
|
|
3781
3797
|
/* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "td-padding", children: organization.organizationName }) }),
|
|
3782
3798
|
/* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "td-padding", children: organization.closeDate }) })
|
|
3783
|
-
] }, `${organization.organizationCode}-${index}`)) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 4, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3799
|
+
] }, `${organization.organizationCode}-${index}`)) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 4, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$g("no-result"), children: [
|
|
3784
3800
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconGraphicsFeedbackEmpty, {}),
|
|
3785
3801
|
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uC870\uD68C \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
|
|
3786
3802
|
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uC785\uB825\uD55C \uC815\uBCF4\uB97C \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694." })
|
|
@@ -3790,7 +3806,7 @@ function OrganizationSearchResult({
|
|
|
3790
3806
|
}
|
|
3791
3807
|
|
|
3792
3808
|
const { TextField } = salesFrontendDesignSystem.FormField;
|
|
3793
|
-
const cx$
|
|
3809
|
+
const cx$f = classNames$1.bind(styles$b);
|
|
3794
3810
|
function OrganizationSearch({
|
|
3795
3811
|
searchTerm,
|
|
3796
3812
|
setSearchTerm,
|
|
@@ -3807,8 +3823,8 @@ function OrganizationSearch({
|
|
|
3807
3823
|
setSearchInput("");
|
|
3808
3824
|
};
|
|
3809
3825
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3810
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
3811
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3826
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$f("search-section"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$f("search-filters"), children: [
|
|
3827
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$f("search-filter-section"), children: [
|
|
3812
3828
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.FormField.Label, { className: "subtitle3 text-body-1", children: "\uAE30\uAD00\uCF54\uB4DC(\uBA85)" }),
|
|
3813
3829
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3814
3830
|
TextField,
|
|
@@ -3819,19 +3835,19 @@ function OrganizationSearch({
|
|
|
3819
3835
|
size: "small",
|
|
3820
3836
|
onKeyUp: (e) => isEnter(e) && handleSearch(),
|
|
3821
3837
|
rootProps: {
|
|
3822
|
-
className: cx$
|
|
3838
|
+
className: cx$f("search-input"),
|
|
3823
3839
|
clearable: true,
|
|
3824
3840
|
onClear: handleReset
|
|
3825
3841
|
}
|
|
3826
3842
|
}
|
|
3827
3843
|
)
|
|
3828
3844
|
] }),
|
|
3829
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
3830
|
-
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { appearance: "outline", size: "small", variant: "secondary", className: cx$
|
|
3831
|
-
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { appearance: "filled", size: "small", variant: "primary", className: cx$
|
|
3845
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$f("search-buttons"), children: [
|
|
3846
|
+
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { appearance: "outline", size: "small", variant: "secondary", className: cx$f("button"), onClick: handleReset, children: "\uCD08\uAE30\uD654" }),
|
|
3847
|
+
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { appearance: "filled", size: "small", variant: "primary", className: cx$f("button"), onClick: handleSearch, children: "\uC870\uD68C" })
|
|
3832
3848
|
] })
|
|
3833
3849
|
] }) }),
|
|
3834
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
3850
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$f("divider") }),
|
|
3835
3851
|
searchTerm && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3836
3852
|
OrganizationSearchResult,
|
|
3837
3853
|
{
|
|
@@ -3919,14 +3935,14 @@ const OrganizationSearchModal = ({
|
|
|
3919
3935
|
] });
|
|
3920
3936
|
};
|
|
3921
3937
|
|
|
3922
|
-
const cx$
|
|
3938
|
+
const cx$e = classNames$1.bind(styles$a);
|
|
3923
3939
|
function JobVehicleSearchModal({ onClose }) {
|
|
3924
3940
|
const { selectedVehicle, VehicleSearchComponent } = useVehicleSearch();
|
|
3925
3941
|
return /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "xlarge", children: [
|
|
3926
3942
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
|
|
3927
3943
|
/* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { style: { height: "697px" }, children: [
|
|
3928
3944
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uC6B4\uC804\uCC28\uC885 \uAC80\uC0C9", showCloseButton: true }),
|
|
3929
|
-
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { className: cx$
|
|
3945
|
+
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { className: cx$e("job-vehicle-search-modal"), raw: true, children: VehicleSearchComponent }),
|
|
3930
3946
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Footer, { style: { marginTop: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Button, { variant: "primary", size: "medium", appearance: "filled", width: "full", onClick: onClose, children: [
|
|
3931
3947
|
"\uD655\uC778(",
|
|
3932
3948
|
selectedVehicle?.integrationCodeValueName || "\uBBF8\uC120\uD0DD",
|
|
@@ -4244,7 +4260,7 @@ const HookFormDateRangePickerRenew = ({
|
|
|
4244
4260
|
return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.DatePickerRangeRenew, { startDateProps: startDateMergedProps, endDateProps: endDateMergedProps });
|
|
4245
4261
|
};
|
|
4246
4262
|
|
|
4247
|
-
const cx$
|
|
4263
|
+
const cx$d = classNames$1.bind(styles$c);
|
|
4248
4264
|
const StepIndicator = ({
|
|
4249
4265
|
items,
|
|
4250
4266
|
onClickItem,
|
|
@@ -4279,26 +4295,26 @@ const StepIndicator = ({
|
|
|
4279
4295
|
salesFrontendDesignSystem.ModalUtils.alert("\uC774\uC804 \uB2E8\uACC4\uB97C \uBAA8\uB450 \uC644\uB8CC\uD574\uC57C \uC120\uD0DD\uD55C \uB2E8\uACC4\uB85C\n\uC774\uB3D9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.", "\uC774\uC804 \uB2E8\uACC4\uB97C \uBA3C\uC800 \uC9C4\uD589\uD574\uC8FC\uC138\uC694");
|
|
4280
4296
|
}
|
|
4281
4297
|
};
|
|
4282
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
4283
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
4298
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$d("stepper-layout", { loading: isLoading }), children: [
|
|
4299
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$d("stepper"), children: steps.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React9.Fragment, { children: [
|
|
4284
4300
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4285
4301
|
"div",
|
|
4286
4302
|
{
|
|
4287
|
-
className: cx$
|
|
4303
|
+
className: cx$d(
|
|
4288
4304
|
"circle",
|
|
4289
4305
|
{ completed: item.isCompleted ?? false },
|
|
4290
4306
|
{ active: defaultValue === item.value || current === idx }
|
|
4291
4307
|
),
|
|
4292
4308
|
onClick: () => handleClickStep?.(item),
|
|
4293
|
-
children: item.isCompleted ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
4309
|
+
children: item.isCompleted ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$d("completed-icon") }) : idx + 1
|
|
4294
4310
|
}
|
|
4295
4311
|
),
|
|
4296
|
-
idx < steps.length - 1 && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
4312
|
+
idx < steps.length - 1 && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$d("dot") }, `dot-${idx}-${dotIdx}`))
|
|
4297
4313
|
] }, `num-${idx}`)) }),
|
|
4298
|
-
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$
|
|
4314
|
+
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$d("step-labels"), children: steps.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
4299
4315
|
"li",
|
|
4300
4316
|
{
|
|
4301
|
-
className: cx$
|
|
4317
|
+
className: cx$d(
|
|
4302
4318
|
{ completed: steps[idx < 1 ? idx : idx - 1]?.isCompleted ?? false },
|
|
4303
4319
|
{ active: defaultValue === item.value || current === idx }
|
|
4304
4320
|
),
|
|
@@ -4310,15 +4326,17 @@ const StepIndicator = ({
|
|
|
4310
4326
|
] });
|
|
4311
4327
|
};
|
|
4312
4328
|
|
|
4313
|
-
const cx$
|
|
4329
|
+
const cx$c = classNames$1.bind(styles$d);
|
|
4314
4330
|
function Attachment({
|
|
4315
4331
|
photos,
|
|
4316
4332
|
onAddPhoto,
|
|
4317
4333
|
onRemovePhoto,
|
|
4318
4334
|
show,
|
|
4319
4335
|
type = "multiple",
|
|
4320
|
-
buttonText
|
|
4336
|
+
buttonText,
|
|
4337
|
+
maxPhotos
|
|
4321
4338
|
}) {
|
|
4339
|
+
const resolvedMaxPhotos = maxPhotos ?? (type === "single" ? 1 : 4);
|
|
4322
4340
|
const handleAddPhoto = () => {
|
|
4323
4341
|
onAddPhoto();
|
|
4324
4342
|
};
|
|
@@ -4327,17 +4345,17 @@ function Attachment({
|
|
|
4327
4345
|
};
|
|
4328
4346
|
const renderPhotoSingle = () => {
|
|
4329
4347
|
if (photos.length === 0) {
|
|
4330
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
4348
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$c("single-photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: cx$c("add-photo-button-single"), onClick: handleAddPhoto, children: [
|
|
4331
4349
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconIllustCamera, {}),
|
|
4332
4350
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: buttonText || "\uC0AC\uC9C4 \uCCA8\uBD80\uD558\uAE30" })
|
|
4333
4351
|
] }) });
|
|
4334
4352
|
}
|
|
4335
|
-
return photos.map((photo) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
4336
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
4353
|
+
return photos.map((photo) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$c("single-photo-item"), children: [
|
|
4354
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$c("photo-placeholder"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: photo.src, alt: photo.name, className: cx$c("photo-image") }) }),
|
|
4337
4355
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4338
4356
|
"button",
|
|
4339
4357
|
{
|
|
4340
|
-
className: cx$
|
|
4358
|
+
className: cx$c("remove-button", "dsp-icons", "dsp-icons-icons-sub-ui-reset"),
|
|
4341
4359
|
onClick: () => handleRemovePhoto(photo.id),
|
|
4342
4360
|
"aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C"
|
|
4343
4361
|
}
|
|
@@ -4345,18 +4363,17 @@ function Attachment({
|
|
|
4345
4363
|
] }, photo.id));
|
|
4346
4364
|
};
|
|
4347
4365
|
const renderPhotoGrid = () => {
|
|
4348
|
-
const maxPhotos = type === "single" ? 1 : 4;
|
|
4349
4366
|
const gridItems = [];
|
|
4350
|
-
if (photos.length <
|
|
4367
|
+
if (photos.length < resolvedMaxPhotos) {
|
|
4351
4368
|
gridItems.push(
|
|
4352
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
4369
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$c("photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: cx$c("add-photo-button"), onClick: handleAddPhoto, children: [
|
|
4353
4370
|
/* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconIllustCamera, {}),
|
|
4354
4371
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: buttonText || "\uCCA8\uBD80\uD558\uAE30" }),
|
|
4355
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx$
|
|
4372
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx$c("photo-count"), children: [
|
|
4356
4373
|
"(",
|
|
4357
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$
|
|
4374
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$c("photo-count-number"), children: photos.length }),
|
|
4358
4375
|
"/",
|
|
4359
|
-
|
|
4376
|
+
resolvedMaxPhotos,
|
|
4360
4377
|
")"
|
|
4361
4378
|
] })
|
|
4362
4379
|
] }) }, "add-photo")
|
|
@@ -4364,12 +4381,12 @@ function Attachment({
|
|
|
4364
4381
|
}
|
|
4365
4382
|
photos.forEach((photo) => {
|
|
4366
4383
|
gridItems.push(
|
|
4367
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$
|
|
4368
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
4384
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$c("photo-item"), children: [
|
|
4385
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$c("photo-placeholder"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: photo.src, alt: photo.name, className: cx$c("photo-image") }) }),
|
|
4369
4386
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4370
4387
|
"button",
|
|
4371
4388
|
{
|
|
4372
|
-
className: cx$
|
|
4389
|
+
className: cx$c("remove-button", "dsp-icons", "dsp-icons-icons-sub-ui-reset"),
|
|
4373
4390
|
onClick: () => handleRemovePhoto(photo.id),
|
|
4374
4391
|
"aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C"
|
|
4375
4392
|
}
|
|
@@ -4384,9 +4401,108 @@ function Attachment({
|
|
|
4384
4401
|
return null;
|
|
4385
4402
|
}
|
|
4386
4403
|
if (type === "single") {
|
|
4387
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$
|
|
4404
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$c("photo-single"), children: renderPhotoSingle() });
|
|
4405
|
+
}
|
|
4406
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$c("photo-grid", { linear: type === "linear" }), children: renderPhotoGrid() });
|
|
4407
|
+
}
|
|
4408
|
+
|
|
4409
|
+
const CAMERA_DEBUG_STORAGE_KEY = "dsp-camera-debug";
|
|
4410
|
+
const CAMERA_DEBUG_COOKIE_VALUE = "camera";
|
|
4411
|
+
const DEBUG_FILTER_COOKIE_KEY = "dsp-debug-mode-filter-name=";
|
|
4412
|
+
function isCameraDebugEnabled() {
|
|
4413
|
+
if (typeof window === "undefined") {
|
|
4414
|
+
return false;
|
|
4415
|
+
}
|
|
4416
|
+
const localStorageEnabled = getLocalStorageDebugEnabled();
|
|
4417
|
+
const cookieEnabled = typeof document !== "undefined" && document.cookie.split(";").some((cookie) => cookie.trim().startsWith(DEBUG_FILTER_COOKIE_KEY) && cookie.includes(CAMERA_DEBUG_COOKIE_VALUE));
|
|
4418
|
+
return localStorageEnabled || cookieEnabled;
|
|
4419
|
+
}
|
|
4420
|
+
function logCameraDebug(message, detail) {
|
|
4421
|
+
if (!isCameraDebugEnabled()) {
|
|
4422
|
+
return;
|
|
4423
|
+
}
|
|
4424
|
+
console.debug(`[camera] ${message}`, detail ?? "");
|
|
4425
|
+
}
|
|
4426
|
+
function logCameraError(message, error) {
|
|
4427
|
+
console.error(`[camera] ${message}`, error ?? "");
|
|
4428
|
+
}
|
|
4429
|
+
function getLocalStorageDebugEnabled() {
|
|
4430
|
+
try {
|
|
4431
|
+
return window.localStorage?.getItem(CAMERA_DEBUG_STORAGE_KEY) === "true";
|
|
4432
|
+
} catch {
|
|
4433
|
+
return false;
|
|
4388
4434
|
}
|
|
4389
|
-
|
|
4435
|
+
}
|
|
4436
|
+
|
|
4437
|
+
const MIN_PAGE_LIMIT = 1;
|
|
4438
|
+
const MAX_PAGE_LIMIT = 20;
|
|
4439
|
+
function clampPageLimit(pageLimit) {
|
|
4440
|
+
if (!pageLimit || Number.isNaN(pageLimit)) {
|
|
4441
|
+
return MIN_PAGE_LIMIT;
|
|
4442
|
+
}
|
|
4443
|
+
return Math.min(MAX_PAGE_LIMIT, Math.max(MIN_PAGE_LIMIT, Math.floor(pageLimit)));
|
|
4444
|
+
}
|
|
4445
|
+
async function convertSourceToFile(source, convertType) {
|
|
4446
|
+
if (source.kind === "file") {
|
|
4447
|
+
return source.file;
|
|
4448
|
+
}
|
|
4449
|
+
if (source.kind === "base64") {
|
|
4450
|
+
return base64ToFile(source.uri, "image.jpg");
|
|
4451
|
+
}
|
|
4452
|
+
return imageUrlToFile(source.uri, convertType);
|
|
4453
|
+
}
|
|
4454
|
+
async function captureNativeDocuments({ pageLimit }) {
|
|
4455
|
+
const clampedPageLimit = clampPageLimit(pageLimit);
|
|
4456
|
+
const legacyResponseFileType = isAndroidDevice() ? "scheme" : "base64";
|
|
4457
|
+
logCameraDebug("native documentCapture requested", {
|
|
4458
|
+
pageLimit: clampedPageLimit,
|
|
4459
|
+
responseFileType: legacyResponseFileType
|
|
4460
|
+
});
|
|
4461
|
+
const response = await salesFrontendBridge.Bridge.native.documentCapture({
|
|
4462
|
+
pageLimit: clampedPageLimit,
|
|
4463
|
+
responseFileType: legacyResponseFileType
|
|
4464
|
+
});
|
|
4465
|
+
if (response.uris && response.uris.length > 0) {
|
|
4466
|
+
logCameraDebug("native documentCapture android uris", { count: response.uris.length });
|
|
4467
|
+
return response.uris.map((uri) => ({ kind: "scheme", uri }));
|
|
4468
|
+
}
|
|
4469
|
+
if (response.sessionId) {
|
|
4470
|
+
return pullIosSession(response.sessionId, response.count ?? 0);
|
|
4471
|
+
}
|
|
4472
|
+
if (response.uri) {
|
|
4473
|
+
const kind = response.uri.startsWith("data:") ? "base64" : "scheme";
|
|
4474
|
+
logCameraDebug("native documentCapture legacy single uri", { kind });
|
|
4475
|
+
return [{ kind, uri: response.uri }];
|
|
4476
|
+
}
|
|
4477
|
+
logCameraDebug("native documentCapture canceled or empty");
|
|
4478
|
+
return [];
|
|
4479
|
+
}
|
|
4480
|
+
async function pullIosSession(sessionId, count) {
|
|
4481
|
+
logCameraDebug("native documentCapture ios session", { sessionId, count });
|
|
4482
|
+
const sources = [];
|
|
4483
|
+
try {
|
|
4484
|
+
for (let index = 0; index < count; index += 1) {
|
|
4485
|
+
const { base64 } = await salesFrontendBridge.Bridge.native.documentCaptureNext({ sessionId, index });
|
|
4486
|
+
sources.push({ kind: "base64", uri: base64 });
|
|
4487
|
+
}
|
|
4488
|
+
} catch (error) {
|
|
4489
|
+
logCameraError("native documentCaptureNext failed", error);
|
|
4490
|
+
} finally {
|
|
4491
|
+
await salesFrontendBridge.Bridge.native.documentCaptureEnd({ sessionId });
|
|
4492
|
+
logCameraDebug("native documentCaptureEnd called", { sessionId });
|
|
4493
|
+
}
|
|
4494
|
+
return sources;
|
|
4495
|
+
}
|
|
4496
|
+
|
|
4497
|
+
const DEFAULT_CAPTURE_ENGINE_TYPE = "input";
|
|
4498
|
+
function resolveCaptureEngineType(options) {
|
|
4499
|
+
if (options.captureEngineType) {
|
|
4500
|
+
return options.captureEngineType;
|
|
4501
|
+
}
|
|
4502
|
+
if (options.useNativeCamera) {
|
|
4503
|
+
return "native";
|
|
4504
|
+
}
|
|
4505
|
+
return DEFAULT_CAPTURE_ENGINE_TYPE;
|
|
4390
4506
|
}
|
|
4391
4507
|
|
|
4392
4508
|
const maxImageSize = 300 * 1024;
|
|
@@ -4562,161 +4678,259 @@ function resize(image, options = { ext: "jpeg", filesize: maxImageSize }) {
|
|
|
4562
4678
|
});
|
|
4563
4679
|
}
|
|
4564
4680
|
|
|
4565
|
-
const
|
|
4566
|
-
|
|
4567
|
-
|
|
4568
|
-
|
|
4569
|
-
|
|
4570
|
-
|
|
4571
|
-
|
|
4572
|
-
|
|
4573
|
-
|
|
4574
|
-
|
|
4575
|
-
|
|
4576
|
-
cameraOnly,
|
|
4577
|
-
onDelete,
|
|
4578
|
-
show,
|
|
4579
|
-
type = "multiple",
|
|
4580
|
-
buttonText,
|
|
4581
|
-
initData,
|
|
4582
|
-
useNativeCamera = false,
|
|
4583
|
-
responseFileType,
|
|
4584
|
-
convertType = "canvas"
|
|
4585
|
-
} = {}) {
|
|
4586
|
-
const convertedInitData = initData?.map((data, index) => ({ ...data, id: String(index + 1) }));
|
|
4587
|
-
const [attachedPhotos, setAttachedPhotos] = React9.useState(convertedInitData || []);
|
|
4588
|
-
const findImage = (imageId) => {
|
|
4589
|
-
return attachedPhotos.find((image) => image.id === imageId);
|
|
4681
|
+
const cx$b = classNames$1.bind(styles$d);
|
|
4682
|
+
const VIDEO_CAPTURE_MIME_TYPE = "image/jpeg";
|
|
4683
|
+
const VIDEO_CAPTURE_QUALITY = 0.92;
|
|
4684
|
+
function createVideoCaptureConstraints() {
|
|
4685
|
+
return {
|
|
4686
|
+
audio: false,
|
|
4687
|
+
video: {
|
|
4688
|
+
facingMode: { ideal: "environment" },
|
|
4689
|
+
width: { ideal: 1920 },
|
|
4690
|
+
height: { ideal: 1080 }
|
|
4691
|
+
}
|
|
4590
4692
|
};
|
|
4591
|
-
|
|
4592
|
-
|
|
4593
|
-
|
|
4594
|
-
|
|
4595
|
-
|
|
4596
|
-
|
|
4597
|
-
|
|
4598
|
-
|
|
4599
|
-
|
|
4600
|
-
|
|
4693
|
+
}
|
|
4694
|
+
async function createVideoCaptureFile(video) {
|
|
4695
|
+
const width = video.videoWidth;
|
|
4696
|
+
const height = video.videoHeight;
|
|
4697
|
+
if (width <= 0 || height <= 0) {
|
|
4698
|
+
throw new Error("Video frame is not ready");
|
|
4699
|
+
}
|
|
4700
|
+
const canvas = document.createElement("canvas");
|
|
4701
|
+
canvas.width = width;
|
|
4702
|
+
canvas.height = height;
|
|
4703
|
+
const context = canvas.getContext("2d");
|
|
4704
|
+
if (!context) {
|
|
4705
|
+
throw new Error("Canvas 2D context is not available");
|
|
4706
|
+
}
|
|
4707
|
+
context.drawImage(video, 0, 0, width, height);
|
|
4708
|
+
const blob = await canvasToBlob(canvas);
|
|
4709
|
+
return new File([blob], `camera-video-${Date.now()}.jpg`, {
|
|
4710
|
+
type: blob.type || VIDEO_CAPTURE_MIME_TYPE,
|
|
4711
|
+
lastModified: Date.now()
|
|
4712
|
+
});
|
|
4713
|
+
}
|
|
4714
|
+
function VideoCaptureModal({ open, onCapture, onClose, maxShots = 1 }) {
|
|
4715
|
+
const videoRef = React9.useRef(null);
|
|
4716
|
+
const streamRef = React9.useRef(null);
|
|
4717
|
+
const [errorMessage, setErrorMessage] = React9.useState(null);
|
|
4718
|
+
const [isReady, setIsReady] = React9.useState(false);
|
|
4719
|
+
const [isCapturing, setIsCapturing] = React9.useState(false);
|
|
4720
|
+
const [capturedShots, setCapturedShots] = React9.useState([]);
|
|
4721
|
+
const normalizedMaxShots = maxShots > 0 ? maxShots : 1;
|
|
4722
|
+
const isMultiShot = normalizedMaxShots > 1;
|
|
4723
|
+
const canCaptureMore = capturedShots.length < normalizedMaxShots;
|
|
4724
|
+
const revokeAllPreviewUrls = (shots) => {
|
|
4725
|
+
shots.forEach((shot) => URL.revokeObjectURL(shot.previewUrl));
|
|
4726
|
+
};
|
|
4727
|
+
React9.useEffect(() => {
|
|
4728
|
+
if (!open) {
|
|
4729
|
+
setCapturedShots((prev) => {
|
|
4730
|
+
revokeAllPreviewUrls(prev);
|
|
4731
|
+
return [];
|
|
4732
|
+
});
|
|
4733
|
+
return void 0;
|
|
4601
4734
|
}
|
|
4602
|
-
|
|
4603
|
-
|
|
4735
|
+
let canceled = false;
|
|
4736
|
+
const startVideoStream = async () => {
|
|
4737
|
+
try {
|
|
4738
|
+
setErrorMessage(null);
|
|
4739
|
+
setIsReady(false);
|
|
4740
|
+
logCameraDebug("video engine stream request");
|
|
4741
|
+
if (!navigator.mediaDevices?.getUserMedia) {
|
|
4742
|
+
throw new Error("mediaDevices.getUserMedia is not supported");
|
|
4743
|
+
}
|
|
4744
|
+
const stream = await navigator.mediaDevices.getUserMedia(createVideoCaptureConstraints());
|
|
4745
|
+
if (canceled) {
|
|
4746
|
+
stopVideoStream(stream);
|
|
4747
|
+
return;
|
|
4748
|
+
}
|
|
4749
|
+
streamRef.current = stream;
|
|
4750
|
+
if (!videoRef.current) {
|
|
4751
|
+
throw new Error("Video element is not mounted");
|
|
4752
|
+
}
|
|
4753
|
+
videoRef.current.srcObject = stream;
|
|
4754
|
+
await videoRef.current.play();
|
|
4755
|
+
if (canceled) {
|
|
4756
|
+
stopVideoStream(stream);
|
|
4757
|
+
return;
|
|
4758
|
+
}
|
|
4759
|
+
if (isVideoFrameReady(videoRef.current)) {
|
|
4760
|
+
setIsReady(true);
|
|
4761
|
+
}
|
|
4762
|
+
logCameraDebug("video engine stream ready");
|
|
4763
|
+
} catch (error) {
|
|
4764
|
+
if (canceled) {
|
|
4765
|
+
return;
|
|
4766
|
+
}
|
|
4767
|
+
logCameraError("video engine stream failed", error);
|
|
4768
|
+
setErrorMessage("\uCE74\uBA54\uB77C\uB97C \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
|
|
4769
|
+
}
|
|
4770
|
+
};
|
|
4771
|
+
void startVideoStream();
|
|
4772
|
+
return () => {
|
|
4773
|
+
canceled = true;
|
|
4774
|
+
stopVideoStream(streamRef.current);
|
|
4775
|
+
streamRef.current = null;
|
|
4776
|
+
logCameraDebug("video engine stream stopped");
|
|
4777
|
+
};
|
|
4778
|
+
}, [open]);
|
|
4779
|
+
const handleLoadedMetadata = () => {
|
|
4780
|
+
if (!videoRef.current) {
|
|
4781
|
+
return;
|
|
4604
4782
|
}
|
|
4783
|
+
setIsReady(isVideoFrameReady(videoRef.current));
|
|
4605
4784
|
};
|
|
4606
|
-
const
|
|
4607
|
-
if (
|
|
4608
|
-
|
|
4609
|
-
await imageHandler(file);
|
|
4610
|
-
} else {
|
|
4611
|
-
const file = await base64ToFile(uri, "image.jpg");
|
|
4612
|
-
await imageHandler(file);
|
|
4785
|
+
const handleCapture = async () => {
|
|
4786
|
+
if (!videoRef.current || isCapturing || !canCaptureMore) {
|
|
4787
|
+
return;
|
|
4613
4788
|
}
|
|
4614
|
-
|
|
4615
|
-
|
|
4616
|
-
|
|
4617
|
-
|
|
4618
|
-
|
|
4619
|
-
|
|
4620
|
-
|
|
4621
|
-
} else {
|
|
4622
|
-
salesFrontendBridge.Bridge.native.documentCapture({ responseFileType: responseFileType || "base64" }).then(async ({ uri }) => {
|
|
4623
|
-
processImage(uri);
|
|
4624
|
-
});
|
|
4625
|
-
}
|
|
4626
|
-
} else {
|
|
4627
|
-
const input = document.createElement("input");
|
|
4628
|
-
input.type = "file";
|
|
4629
|
-
input.accept = "image/*";
|
|
4630
|
-
if (cameraOnly) {
|
|
4631
|
-
input.capture = "camera";
|
|
4789
|
+
try {
|
|
4790
|
+
setIsCapturing(true);
|
|
4791
|
+
const file = await createVideoCaptureFile(videoRef.current);
|
|
4792
|
+
logCameraDebug("video engine capture completed", { size: file.size, type: file.type });
|
|
4793
|
+
if (isMultiShot) {
|
|
4794
|
+
setCapturedShots((prev) => [...prev, { file, previewUrl: URL.createObjectURL(file) }]);
|
|
4795
|
+
return;
|
|
4632
4796
|
}
|
|
4633
|
-
|
|
4634
|
-
|
|
4635
|
-
|
|
4636
|
-
|
|
4637
|
-
|
|
4638
|
-
|
|
4639
|
-
|
|
4640
|
-
}
|
|
4641
|
-
}
|
|
4642
|
-
document.body.removeChild(input);
|
|
4643
|
-
});
|
|
4644
|
-
input.style.display = "none";
|
|
4645
|
-
document.body.appendChild(input);
|
|
4646
|
-
input.click();
|
|
4797
|
+
await onCapture([file]);
|
|
4798
|
+
onClose();
|
|
4799
|
+
} catch (error) {
|
|
4800
|
+
logCameraError("video engine capture failed", error);
|
|
4801
|
+
setErrorMessage("\uCD2C\uC601 \uC774\uBBF8\uC9C0\uB97C \uCC98\uB9AC\uD558\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4.");
|
|
4802
|
+
} finally {
|
|
4803
|
+
setIsCapturing(false);
|
|
4647
4804
|
}
|
|
4648
4805
|
};
|
|
4649
|
-
const
|
|
4650
|
-
|
|
4651
|
-
|
|
4652
|
-
|
|
4653
|
-
|
|
4654
|
-
|
|
4655
|
-
|
|
4656
|
-
|
|
4657
|
-
|
|
4658
|
-
|
|
4659
|
-
}
|
|
4806
|
+
const handleComplete = async () => {
|
|
4807
|
+
if (capturedShots.length === 0) {
|
|
4808
|
+
return;
|
|
4809
|
+
}
|
|
4810
|
+
try {
|
|
4811
|
+
await onCapture(capturedShots.map((shot) => shot.file));
|
|
4812
|
+
onClose();
|
|
4813
|
+
} catch (error) {
|
|
4814
|
+
logCameraError("video engine multi-shot complete failed", error);
|
|
4815
|
+
setErrorMessage("\uCD2C\uC601 \uC774\uBBF8\uC9C0\uB97C \uCC98\uB9AC\uD558\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4.");
|
|
4660
4816
|
}
|
|
4661
4817
|
};
|
|
4662
|
-
const
|
|
4663
|
-
|
|
4664
|
-
|
|
4665
|
-
if (
|
|
4666
|
-
|
|
4818
|
+
const handleRemoveCapturedShot = (targetIndex) => {
|
|
4819
|
+
setCapturedShots((prev) => {
|
|
4820
|
+
const target = prev[targetIndex];
|
|
4821
|
+
if (target) {
|
|
4822
|
+
URL.revokeObjectURL(target.previewUrl);
|
|
4667
4823
|
}
|
|
4824
|
+
return prev.filter((_, index) => index !== targetIndex);
|
|
4668
4825
|
});
|
|
4669
|
-
setAttachedPhotos([]);
|
|
4670
4826
|
};
|
|
4671
|
-
|
|
4672
|
-
|
|
4673
|
-
|
|
4674
|
-
|
|
4675
|
-
|
|
4676
|
-
|
|
4677
|
-
|
|
4678
|
-
|
|
4679
|
-
|
|
4680
|
-
|
|
4681
|
-
|
|
4682
|
-
|
|
4683
|
-
|
|
4684
|
-
|
|
4685
|
-
|
|
4686
|
-
|
|
4687
|
-
|
|
4688
|
-
|
|
4689
|
-
|
|
4690
|
-
|
|
4691
|
-
|
|
4692
|
-
|
|
4693
|
-
|
|
4694
|
-
|
|
4695
|
-
|
|
4696
|
-
|
|
4697
|
-
|
|
4698
|
-
|
|
4699
|
-
|
|
4700
|
-
let blobUrl = "";
|
|
4701
|
-
if (item.data instanceof Blob) {
|
|
4702
|
-
blobUrl = URL.createObjectURL(item.data);
|
|
4703
|
-
} else if (typeof item.data === "string") {
|
|
4704
|
-
blobUrl = URL.createObjectURL(base64ToBlob(item.data));
|
|
4827
|
+
if (!open) {
|
|
4828
|
+
return null;
|
|
4829
|
+
}
|
|
4830
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$b("video-capture-overlay"), role: "dialog", "aria-modal": "true", "aria-label": "\uCE74\uBA54\uB77C \uCD2C\uC601", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$b("video-capture-dialog"), children: [
|
|
4831
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4832
|
+
"video",
|
|
4833
|
+
{
|
|
4834
|
+
ref: videoRef,
|
|
4835
|
+
className: cx$b("video-capture-view"),
|
|
4836
|
+
autoPlay: true,
|
|
4837
|
+
muted: true,
|
|
4838
|
+
playsInline: true,
|
|
4839
|
+
onLoadedMetadata: handleLoadedMetadata
|
|
4840
|
+
}
|
|
4841
|
+
),
|
|
4842
|
+
errorMessage ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx$b("video-capture-error"), role: "alert", children: errorMessage }) : null,
|
|
4843
|
+
isMultiShot ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$b("video-capture-thumbnails"), "aria-live": "polite", children: [
|
|
4844
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$b("video-capture-counter"), children: [
|
|
4845
|
+
capturedShots.length,
|
|
4846
|
+
"/",
|
|
4847
|
+
normalizedMaxShots
|
|
4848
|
+
] }),
|
|
4849
|
+
capturedShots.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$b("video-capture-thumbnail-list"), children: capturedShots.map((shot, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cx$b("video-capture-thumbnail-item"), children: [
|
|
4850
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4851
|
+
"img",
|
|
4852
|
+
{
|
|
4853
|
+
src: shot.previewUrl,
|
|
4854
|
+
alt: `\uCD2C\uC601 ${index + 1}\uBC88 \uC0AC\uC9C4`,
|
|
4855
|
+
className: cx$b("video-capture-thumbnail-image")
|
|
4705
4856
|
}
|
|
4706
|
-
|
|
4707
|
-
|
|
4708
|
-
|
|
4709
|
-
|
|
4710
|
-
|
|
4711
|
-
|
|
4712
|
-
|
|
4713
|
-
|
|
4714
|
-
|
|
4715
|
-
|
|
4857
|
+
),
|
|
4858
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4859
|
+
"button",
|
|
4860
|
+
{
|
|
4861
|
+
type: "button",
|
|
4862
|
+
className: cx$b("video-capture-thumbnail-remove"),
|
|
4863
|
+
onClick: () => handleRemoveCapturedShot(index),
|
|
4864
|
+
"aria-label": `\uCD2C\uC601 ${index + 1}\uBC88 \uC0AC\uC9C4 \uC0AD\uC81C`,
|
|
4865
|
+
children: "\xD7"
|
|
4866
|
+
}
|
|
4867
|
+
)
|
|
4868
|
+
] }, shot.previewUrl)) }) : null
|
|
4869
|
+
] }) : null,
|
|
4870
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$b("video-capture-actions"), children: [
|
|
4871
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { className: cx$b("video-capture-button", "video-capture-secondary"), type: "button", onClick: onClose, children: "\uB2EB\uAE30" }),
|
|
4872
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4873
|
+
"button",
|
|
4874
|
+
{
|
|
4875
|
+
className: cx$b("video-capture-button", "video-capture-primary"),
|
|
4876
|
+
type: "button",
|
|
4877
|
+
disabled: !isReady || isCapturing || !canCaptureMore,
|
|
4878
|
+
onClick: handleCapture,
|
|
4879
|
+
children: "\uCD2C\uC601"
|
|
4880
|
+
}
|
|
4881
|
+
),
|
|
4882
|
+
isMultiShot ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
4883
|
+
"button",
|
|
4884
|
+
{
|
|
4885
|
+
className: cx$b("video-capture-button", "video-capture-primary"),
|
|
4886
|
+
type: "button",
|
|
4887
|
+
disabled: capturedShots.length === 0,
|
|
4888
|
+
onClick: handleComplete,
|
|
4889
|
+
children: "\uC644\uB8CC"
|
|
4890
|
+
}
|
|
4891
|
+
) : null
|
|
4892
|
+
] })
|
|
4893
|
+
] }) });
|
|
4894
|
+
}
|
|
4895
|
+
function stopVideoStream(stream) {
|
|
4896
|
+
stream?.getTracks().forEach((track) => {
|
|
4897
|
+
track.stop();
|
|
4898
|
+
});
|
|
4899
|
+
}
|
|
4900
|
+
function isVideoFrameReady(video) {
|
|
4901
|
+
return video.videoWidth > 0 && video.videoHeight > 0;
|
|
4902
|
+
}
|
|
4903
|
+
function canvasToBlob(canvas) {
|
|
4904
|
+
if (canvas.toBlob) {
|
|
4905
|
+
return new Promise((resolve, reject) => {
|
|
4906
|
+
canvas.toBlob(
|
|
4907
|
+
(blob) => {
|
|
4908
|
+
if (!blob) {
|
|
4909
|
+
reject(new Error("Canvas blob is empty"));
|
|
4910
|
+
return;
|
|
4911
|
+
}
|
|
4912
|
+
resolve(blob);
|
|
4913
|
+
},
|
|
4914
|
+
VIDEO_CAPTURE_MIME_TYPE,
|
|
4915
|
+
VIDEO_CAPTURE_QUALITY
|
|
4916
|
+
);
|
|
4917
|
+
});
|
|
4918
|
+
}
|
|
4919
|
+
return Promise.resolve(dataUrlToBlob(canvas.toDataURL(VIDEO_CAPTURE_MIME_TYPE, VIDEO_CAPTURE_QUALITY)));
|
|
4920
|
+
}
|
|
4921
|
+
function dataUrlToBlob(dataUrl) {
|
|
4922
|
+
const [header = "", body = ""] = dataUrl.split(",");
|
|
4923
|
+
const mimeType = header.match(/data:(.*);base64/)?.[1] || VIDEO_CAPTURE_MIME_TYPE;
|
|
4924
|
+
const binary = window.atob(body);
|
|
4925
|
+
const bytes = new Uint8Array(binary.length);
|
|
4926
|
+
for (let i = 0; i < binary.length; i++) {
|
|
4927
|
+
bytes[i] = binary.charCodeAt(i);
|
|
4928
|
+
}
|
|
4929
|
+
return new Blob([bytes], { type: mimeType });
|
|
4716
4930
|
}
|
|
4717
4931
|
|
|
4718
4932
|
const genImageId = () => `camera-${Date.now()}-${Math.random()}`;
|
|
4719
|
-
function
|
|
4933
|
+
function useCameraV3({
|
|
4720
4934
|
onChange,
|
|
4721
4935
|
resize: resizeOption = {
|
|
4722
4936
|
processType: "mixed",
|
|
@@ -4732,83 +4946,152 @@ function useCameraV2({
|
|
|
4732
4946
|
type = "multiple",
|
|
4733
4947
|
buttonText,
|
|
4734
4948
|
initData,
|
|
4949
|
+
captureEngineType,
|
|
4950
|
+
resizeTiming = "onCapture",
|
|
4951
|
+
pageLimit,
|
|
4735
4952
|
useNativeCamera = false,
|
|
4736
|
-
|
|
4737
|
-
|
|
4738
|
-
|
|
4953
|
+
convertType = "canvas",
|
|
4954
|
+
maxPhotos,
|
|
4955
|
+
overMaxPhotosBehavior,
|
|
4956
|
+
maxPhotosErrorHandler
|
|
4957
|
+
} = {}) {
|
|
4739
4958
|
const convertedInitData = initData?.map((data, index) => ({ ...data, id: String(index + 1) }));
|
|
4740
4959
|
const [attachedPhotos, setAttachedPhotos] = React9.useState(convertedInitData || []);
|
|
4741
|
-
const
|
|
4742
|
-
|
|
4743
|
-
|
|
4744
|
-
|
|
4960
|
+
const attachedPhotosRef = React9.useRef(convertedInitData || []);
|
|
4961
|
+
const [isVideoCaptureOpen, setIsVideoCaptureOpen] = React9.useState(false);
|
|
4962
|
+
const resolvedCaptureEngineType = resolveCaptureEngineType({ captureEngineType, useNativeCamera });
|
|
4963
|
+
const normalizedPageLimit = pageLimit && pageLimit > 0 ? pageLimit : 1;
|
|
4964
|
+
const resolvedMaxPhotos = maxPhotos ?? (type === "single" ? 1 : Math.max(4, normalizedPageLimit));
|
|
4965
|
+
const resolvedOverflowBehavior = overMaxPhotosBehavior ?? (maxPhotosErrorHandler ? "error" : "truncate");
|
|
4966
|
+
const applyMaxPhotosPolicy = (items, overflow) => {
|
|
4967
|
+
if (items.length === 0) {
|
|
4968
|
+
return items;
|
|
4969
|
+
}
|
|
4970
|
+
const current = attachedPhotosRef.current.length;
|
|
4971
|
+
const remaining = Math.max(0, resolvedMaxPhotos - current);
|
|
4972
|
+
if (items.length <= remaining) {
|
|
4973
|
+
return items;
|
|
4974
|
+
}
|
|
4975
|
+
if (resolvedOverflowBehavior === "error" && maxPhotosErrorHandler) {
|
|
4976
|
+
maxPhotosErrorHandler(
|
|
4977
|
+
overflow.buildInfo({ attempted: items.length, current, max: resolvedMaxPhotos, data: items })
|
|
4978
|
+
);
|
|
4979
|
+
return null;
|
|
4745
4980
|
}
|
|
4746
|
-
|
|
4747
|
-
|
|
4748
|
-
|
|
4749
|
-
|
|
4750
|
-
};
|
|
4751
|
-
return convertedPhoto;
|
|
4981
|
+
if (remaining === 0) {
|
|
4982
|
+
return null;
|
|
4983
|
+
}
|
|
4984
|
+
return items.slice(0, remaining);
|
|
4752
4985
|
};
|
|
4753
|
-
const
|
|
4754
|
-
|
|
4755
|
-
|
|
4756
|
-
|
|
4757
|
-
|
|
4758
|
-
}
|
|
4759
|
-
|
|
4760
|
-
|
|
4761
|
-
|
|
4762
|
-
|
|
4986
|
+
const buildPhoto = async (source, name) => {
|
|
4987
|
+
if (resizeTiming === "onCapture") {
|
|
4988
|
+
const original = await convertSourceToFile(source, convertType);
|
|
4989
|
+
const processed = resizeOption ? await resize(original, resizeOption) : original;
|
|
4990
|
+
return { photo: { id: genImageId(), src: URL.createObjectURL(processed), name }, file: original };
|
|
4991
|
+
}
|
|
4992
|
+
const file = onChange ? await convertSourceToFile(source, convertType) : void 0;
|
|
4993
|
+
return { photo: { id: genImageId(), src: source.uri, name }, file };
|
|
4994
|
+
};
|
|
4995
|
+
const storeCapturedSources = async (sources, source = "native", overflowData) => {
|
|
4996
|
+
if (sources.length === 0) {
|
|
4997
|
+
return;
|
|
4998
|
+
}
|
|
4999
|
+
const accepted = applyMaxPhotosPolicy(sources, {
|
|
5000
|
+
source,
|
|
5001
|
+
buildInfo: ({ attempted, current, max }) => {
|
|
5002
|
+
const data = overflowData ?? sources;
|
|
5003
|
+
if (source === "native") {
|
|
5004
|
+
return { source: "native", attempted, current, max, data };
|
|
5005
|
+
}
|
|
5006
|
+
if (source === "addImage") {
|
|
5007
|
+
return { source: "addImage", attempted, current, max, data };
|
|
5008
|
+
}
|
|
5009
|
+
return { source, attempted, current, max, data };
|
|
5010
|
+
}
|
|
5011
|
+
});
|
|
5012
|
+
if (!accepted || accepted.length === 0) {
|
|
5013
|
+
return;
|
|
4763
5014
|
}
|
|
5015
|
+
const baseCount = attachedPhotosRef.current.length;
|
|
5016
|
+
const built = await Promise.all(
|
|
5017
|
+
accepted.map((item, index) => buildPhoto(item, `\uC11C\uB958\uC0AC\uC9C4_${baseCount + index + 1}`))
|
|
5018
|
+
);
|
|
5019
|
+
const builtPhotos = built.map((item) => item.photo);
|
|
5020
|
+
setAttachedPhotos((prev) => type === "single" ? builtPhotos.slice(-1) : [...prev, ...builtPhotos]);
|
|
4764
5021
|
if (onChange) {
|
|
4765
|
-
|
|
4766
|
-
|
|
5022
|
+
built.forEach((item) => {
|
|
5023
|
+
if (item.file) {
|
|
5024
|
+
onChange(item.file);
|
|
5025
|
+
}
|
|
5026
|
+
});
|
|
4767
5027
|
}
|
|
4768
5028
|
};
|
|
4769
|
-
const
|
|
4770
|
-
|
|
4771
|
-
|
|
4772
|
-
|
|
4773
|
-
|
|
4774
|
-
|
|
4775
|
-
|
|
4776
|
-
|
|
4777
|
-
|
|
4778
|
-
|
|
4779
|
-
|
|
5029
|
+
const openFileInput = () => {
|
|
5030
|
+
const input = document.createElement("input");
|
|
5031
|
+
input.type = "file";
|
|
5032
|
+
input.accept = "image/*";
|
|
5033
|
+
input.multiple = normalizedPageLimit > 1;
|
|
5034
|
+
if (cameraOnly) {
|
|
5035
|
+
input.capture = "camera";
|
|
5036
|
+
}
|
|
5037
|
+
input.addEventListener("change", async (event) => {
|
|
5038
|
+
const target = event.target;
|
|
5039
|
+
const fileList = target.files ? Array.from(target.files) : [];
|
|
5040
|
+
if (fileList.length > 0) {
|
|
5041
|
+
const sources = fileList.map((file) => ({
|
|
5042
|
+
kind: "file",
|
|
5043
|
+
file,
|
|
5044
|
+
uri: URL.createObjectURL(file)
|
|
5045
|
+
}));
|
|
5046
|
+
await storeCapturedSources(sources, "input", fileList);
|
|
4780
5047
|
}
|
|
4781
|
-
|
|
4782
|
-
|
|
4783
|
-
|
|
4784
|
-
|
|
4785
|
-
|
|
4786
|
-
|
|
4787
|
-
|
|
4788
|
-
|
|
4789
|
-
|
|
4790
|
-
|
|
4791
|
-
|
|
4792
|
-
|
|
4793
|
-
|
|
4794
|
-
|
|
5048
|
+
document.body.removeChild(input);
|
|
5049
|
+
});
|
|
5050
|
+
input.style.display = "none";
|
|
5051
|
+
document.body.appendChild(input);
|
|
5052
|
+
input.click();
|
|
5053
|
+
};
|
|
5054
|
+
const onClick = () => {
|
|
5055
|
+
logCameraDebug("useCameraV3 capture requested", {
|
|
5056
|
+
captureEngineType: resolvedCaptureEngineType,
|
|
5057
|
+
resizeTiming
|
|
5058
|
+
});
|
|
5059
|
+
if (resolvedCaptureEngineType === "native") {
|
|
5060
|
+
captureNativeDocuments({ pageLimit }).then((sources) => storeCapturedSources(sources, "native"));
|
|
5061
|
+
return;
|
|
5062
|
+
}
|
|
5063
|
+
if (resolvedCaptureEngineType === "video") {
|
|
5064
|
+
setIsVideoCaptureOpen(true);
|
|
5065
|
+
return;
|
|
4795
5066
|
}
|
|
5067
|
+
openFileInput();
|
|
5068
|
+
};
|
|
5069
|
+
const getImage = async (imageId) => {
|
|
5070
|
+
const photo = attachedPhotosRef.current.find((image) => image.id === imageId);
|
|
5071
|
+
if (!photo) {
|
|
5072
|
+
throw new Error("[use-camera-v3] : Image not found");
|
|
5073
|
+
}
|
|
5074
|
+
if (resizeTiming === "onCapture") {
|
|
5075
|
+
return photo;
|
|
5076
|
+
}
|
|
5077
|
+
const file = await convertSourceToFile({ kind: "scheme", uri: photo.src }, convertType);
|
|
5078
|
+
return { ...photo, src: URL.createObjectURL(resizeOption ? await resize(file, resizeOption) : file) };
|
|
4796
5079
|
};
|
|
4797
5080
|
const deleteImage = (imageId) => {
|
|
4798
|
-
|
|
4799
|
-
|
|
4800
|
-
|
|
4801
|
-
|
|
4802
|
-
URL.revokeObjectURL(item[0].src);
|
|
5081
|
+
setAttachedPhotos((prev) => {
|
|
5082
|
+
const target = prev.find((image) => image.id === imageId);
|
|
5083
|
+
if (!target) {
|
|
5084
|
+
return prev;
|
|
4803
5085
|
}
|
|
4804
|
-
|
|
5086
|
+
URL.revokeObjectURL(target.src);
|
|
4805
5087
|
if (onDelete) {
|
|
4806
5088
|
onDelete(imageId);
|
|
4807
5089
|
}
|
|
4808
|
-
|
|
5090
|
+
return prev.filter((image) => image.id !== imageId);
|
|
5091
|
+
});
|
|
4809
5092
|
};
|
|
4810
5093
|
const deleteAllImages = () => {
|
|
4811
|
-
|
|
5094
|
+
attachedPhotosRef.current.forEach((image) => {
|
|
4812
5095
|
URL.revokeObjectURL(image.src);
|
|
4813
5096
|
if (onDelete) {
|
|
4814
5097
|
onDelete(image.id);
|
|
@@ -4816,51 +5099,94 @@ function useCameraV2({
|
|
|
4816
5099
|
});
|
|
4817
5100
|
setAttachedPhotos([]);
|
|
4818
5101
|
};
|
|
4819
|
-
const
|
|
4820
|
-
|
|
4821
|
-
|
|
4822
|
-
|
|
4823
|
-
|
|
4824
|
-
|
|
4825
|
-
|
|
4826
|
-
|
|
4827
|
-
|
|
5102
|
+
const addImage = (data) => {
|
|
5103
|
+
const accepted = applyMaxPhotosPolicy(data, {
|
|
5104
|
+
source: "addImage",
|
|
5105
|
+
buildInfo: ({ attempted, current, max }) => ({
|
|
5106
|
+
source: "addImage",
|
|
5107
|
+
attempted,
|
|
5108
|
+
current,
|
|
5109
|
+
max,
|
|
5110
|
+
data
|
|
5111
|
+
})
|
|
5112
|
+
});
|
|
5113
|
+
if (!accepted || accepted.length === 0) {
|
|
5114
|
+
return;
|
|
4828
5115
|
}
|
|
4829
|
-
|
|
5116
|
+
setAttachedPhotos((prev) => [
|
|
5117
|
+
...prev,
|
|
5118
|
+
...accepted.map((item, index) => {
|
|
5119
|
+
let blobUrl = "";
|
|
5120
|
+
if (item.data instanceof Blob) {
|
|
5121
|
+
blobUrl = URL.createObjectURL(item.data);
|
|
5122
|
+
} else if (typeof item.data === "string") {
|
|
5123
|
+
blobUrl = URL.createObjectURL(base64ToBlob(item.data));
|
|
5124
|
+
}
|
|
5125
|
+
return { id: genImageId(), src: blobUrl, name: item.name || `\uC11C\uB958\uC0AC\uC9C4_${prev.length + index + 1}` };
|
|
5126
|
+
})
|
|
5127
|
+
]);
|
|
5128
|
+
};
|
|
5129
|
+
const CameraComponent = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
5130
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5131
|
+
Attachment,
|
|
5132
|
+
{
|
|
5133
|
+
show: !!show,
|
|
5134
|
+
onAddPhoto: onClick,
|
|
5135
|
+
onRemovePhoto: deleteImage,
|
|
5136
|
+
photos: attachedPhotos,
|
|
5137
|
+
type,
|
|
5138
|
+
buttonText,
|
|
5139
|
+
maxPhotos: resolvedMaxPhotos
|
|
5140
|
+
}
|
|
5141
|
+
),
|
|
5142
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5143
|
+
VideoCaptureModal,
|
|
5144
|
+
{
|
|
5145
|
+
open: resolvedCaptureEngineType === "video" && isVideoCaptureOpen,
|
|
5146
|
+
maxShots: normalizedPageLimit,
|
|
5147
|
+
onCapture: (files) => {
|
|
5148
|
+
const sources = files.map((file) => ({
|
|
5149
|
+
kind: "file",
|
|
5150
|
+
file,
|
|
5151
|
+
uri: URL.createObjectURL(file)
|
|
5152
|
+
}));
|
|
5153
|
+
return storeCapturedSources(sources, "video", files);
|
|
5154
|
+
},
|
|
5155
|
+
onClose: () => setIsVideoCaptureOpen(false)
|
|
5156
|
+
}
|
|
5157
|
+
)
|
|
5158
|
+
] });
|
|
5159
|
+
React9.useEffect(() => {
|
|
5160
|
+
attachedPhotosRef.current = attachedPhotos;
|
|
5161
|
+
}, [attachedPhotos]);
|
|
4830
5162
|
React9.useEffect(() => {
|
|
4831
5163
|
return () => {
|
|
4832
|
-
|
|
5164
|
+
attachedPhotosRef.current.forEach((image) => {
|
|
4833
5165
|
URL.revokeObjectURL(image.src);
|
|
4834
5166
|
});
|
|
4835
5167
|
};
|
|
4836
5168
|
}, []);
|
|
4837
5169
|
return {
|
|
4838
5170
|
onClick,
|
|
4839
|
-
getImage
|
|
5171
|
+
getImage,
|
|
4840
5172
|
deleteImage,
|
|
4841
5173
|
deleteAllImages,
|
|
4842
5174
|
attachedPhotos,
|
|
4843
5175
|
Attachment: CameraComponent,
|
|
4844
|
-
addImage
|
|
4845
|
-
|
|
4846
|
-
|
|
4847
|
-
|
|
4848
|
-
|
|
4849
|
-
|
|
4850
|
-
|
|
4851
|
-
|
|
4852
|
-
blobUrl = URL.createObjectURL(base64ToBlob(item.data));
|
|
4853
|
-
}
|
|
4854
|
-
const newPhoto = {
|
|
4855
|
-
id: genImageId(),
|
|
4856
|
-
src: blobUrl,
|
|
4857
|
-
name: item.name || `\uC11C\uB958\uC0AC\uC9C4_${attachedPhotos.length + 1}`
|
|
4858
|
-
};
|
|
4859
|
-
return newPhoto;
|
|
4860
|
-
})
|
|
4861
|
-
]);
|
|
4862
|
-
}
|
|
5176
|
+
addImage
|
|
5177
|
+
};
|
|
5178
|
+
}
|
|
5179
|
+
|
|
5180
|
+
function useCamera(options = {}) {
|
|
5181
|
+
const camera = useCameraV3({ pageLimit: 1, ...options, resizeTiming: "onCapture" });
|
|
5182
|
+
const getImage = (imageId) => {
|
|
5183
|
+
return camera.attachedPhotos.find((image) => image.id === imageId);
|
|
4863
5184
|
};
|
|
5185
|
+
return { ...camera, getImage };
|
|
5186
|
+
}
|
|
5187
|
+
|
|
5188
|
+
function useCameraV2(options) {
|
|
5189
|
+
return useCameraV3({ pageLimit: 1, ...options, resizeTiming: "onRetrieve" });
|
|
4864
5190
|
}
|
|
4865
5191
|
|
|
4866
5192
|
const HISTORY_SIZE = 100;
|
|
@@ -7447,6 +7773,7 @@ exports.useAddressComponent = useAddressComponent;
|
|
|
7447
7773
|
exports.useBankStockSearch = useBankStockSearch;
|
|
7448
7774
|
exports.useCamera = useCamera;
|
|
7449
7775
|
exports.useCameraV2 = useCameraV2;
|
|
7776
|
+
exports.useCameraV3 = useCameraV3;
|
|
7450
7777
|
exports.useCanvasPaint = useCanvasPaint;
|
|
7451
7778
|
exports.useCustomerSearch = useCustomerSearch;
|
|
7452
7779
|
exports.useDownloader = useDownloader;
|