sales-frontend-components 0.0.106 → 0.0.107

package/dist/index.cjs.js

@@ -236,12 +236,12 @@ const highlightOnSearchKeyword$1 = (originalText, targetString) => {
   return originalText;
 };
 
-const cx$j = classNames.bind(styles);
-const { InputBox: InputBox$3, Input: Input$3 } = salesFrontendDesignSystem.FormCore;
+const cx$k = classNames.bind(styles);
+const { InputBox: InputBox$4, Input: Input$4 } = salesFrontendDesignSystem.FormCore;
 const AddressSearchInitialText = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$j("search-result-list"), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx$j("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
-    /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: cx$j("guide"), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$k("search-result-list"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx$k("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
+    /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: cx$k("guide"), children: [
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uB3C4\uB85C\uBA85/\uC9C0\uBA85\uACFC \uAC74\uBB3C\uBC88\uD638\uB97C \uD568\uAED8 \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uC608) 63\uB85C 50, \uC5EC\uC758\uB3C4\uB3D9 60" }),
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uC9C0\uBA85\uC740 \uB3D9/\uC74D/\uBA74/\uB9AC\uB85C \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
@@ -257,8 +257,8 @@ const AddressSearchResult = ({
   searchKeyword,
   selectedAddress
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$j("search-result-list"), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$j("guide-title"), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$k("search-result-list"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$k("guide-title"), children: [
       "\uCD1D ",
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: addressSearchList.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
@@ -270,15 +270,15 @@ const AddressSearchResult = ({
           return {
             value: JSON.stringify(item),
             select: item.roadNameBaseAddress === selectedAddress?.roadNameBaseAddress && item.roadNameDetailAddress === selectedAddress?.roadNameDetailAddress && item.mainBuildingName === selectedAddress?.mainBuildingName,
-            label: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$j("search-result"), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$j("zipcode"), children: highlightOnSearchKeyword$1(`${item.firstPostalCode}${item.secondPostalCode}`, searchKeyword) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$j("divider") }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$j("address-info"), children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$j("address"), children: highlightOnSearchKeyword$1(
+            label: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$k("search-result"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$k("zipcode"), children: highlightOnSearchKeyword$1(`${item.firstPostalCode}${item.secondPostalCode}`, searchKeyword) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$k("divider") }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$k("address-info"), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$k("address"), children: highlightOnSearchKeyword$1(
                   `${item.roadNameBaseAddress} ${item.roadNameDetailAddress} ${item.mainBuildingName}`,
                   searchKeyword
                 ) }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$j("old-address"), children: highlightOnSearchKeyword$1(
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$k("old-address"), children: highlightOnSearchKeyword$1(
                   `${item.landNumberBaseAddress} ${item.landNumberDetailAddress}`,
                   searchKeyword
                 ) })
@@ -287,7 +287,7 @@ const AddressSearchResult = ({
             id: JSON.stringify(item)
           };
         }),
-        className: cx$j("radio-group"),
+        className: cx$k("radio-group"),
         name: "address-search",
         size: "medium",
         defaultValue: "",
@@ -309,7 +309,7 @@ const AddressSearchDetailInput = ({
   detailAddressInput
 }) => {
   const { land, road } = selectedStandardizationAddress;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$j("search-result-list"), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$k("search-result-list"), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       salesFrontendDesignSystem.Radio.Root,
       {
@@ -319,21 +319,21 @@ const AddressSearchDetailInput = ({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           salesFrontendDesignSystem.Radio.Item,
           {
-            className: cx$j("radio-group"),
+            className: cx$k("radio-group"),
             value: JSON.stringify(selectedStandardizationAddress),
             onChange: onStandardizationChange,
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$j("search-result"), children: [
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$k("search-result"), children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: cx$j("zipcode"),
+                  className: cx$k("zipcode"),
                   children: `${selectedStandardizationAddress.land?.firstPostalCode}${land?.secondPostalCode}`
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$j("divider") }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$j("address-info"), children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$j("address"), children: `${road?.baseAddress} ${road?.detailAddress}` }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$j("old-address"), children: `${land?.baseAddress} ${land?.detailAddress}` })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$k("divider") }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$k("address-info"), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$k("address"), children: `${road?.baseAddress} ${road?.detailAddress}` }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$k("old-address"), children: `${land?.baseAddress} ${land?.detailAddress}` })
               ] })
             ] })
           }
@@ -390,8 +390,8 @@ function AddressComponent({ isOpen, onClose, setValue }) {
     /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uC8FC\uC18C \uAC80\uC0C9", showCloseButton: true }),
       /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(InputBox$3, { clearable: true, endElement: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconMainUiSearch, { onClick: search }), onClear: onAddressSearchClear, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Input$3,
+        /* @__PURE__ */ jsxRuntime.jsx(InputBox$4, { clearable: true, endElement: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconMainUiSearch, { onClick: search }), onClear: onAddressSearchClear, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input$4,
           {
             ...addressSearchStep !== "detail-input" && { autoFocus: true },
             onChange: onSearch,
@@ -1063,7 +1063,7 @@ const useCustomerSearch = (onSelect) => {
   };
 };
 
-const cx$i = classNames.bind(styles$2);
+const cx$j = classNames.bind(styles$2);
 const highlightOnSearchKeyword = (originalText, targetString) => {
   if (!targetString || !originalText?.includes(targetString)) {
     return originalText;
@@ -1080,7 +1080,7 @@ const highlightOnSearchKeyword = (originalText, targetString) => {
   }
   return replacedText;
 };
-const { InputBox: InputBox$2, Input: Input$2 } = salesFrontendDesignSystem.FormCore;
+const { InputBox: InputBox$3, Input: Input$3 } = salesFrontendDesignSystem.FormCore;
 const CustomerSearch = ({ onSelect }) => {
   const {
     triggerRef,
@@ -1095,9 +1095,9 @@ const CustomerSearch = ({ onSelect }) => {
     onClear,
     handleSelectItem
   } = useCustomerSearch(onSelect);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$i("container"), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$i("search-bar"), children: /* @__PURE__ */ jsxRuntime.jsx(InputBox$2, { endElement: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconMainUiSearch, { onClick: search }), onClear, clearable: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Input$2,
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$j("container"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$j("search-bar"), children: /* @__PURE__ */ jsxRuntime.jsx(InputBox$3, { endElement: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconMainUiSearch, { onClick: search }), onClear, clearable: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Input$3,
       {
         onChange: onSearchInputChange,
         onKeyUp,
@@ -1107,14 +1107,14 @@ const CustomerSearch = ({ onSelect }) => {
         ref: triggerRef
       }
     ) }) }),
-    isOpen && customerList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(DropDown, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$i("result-container"), children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.List, { children: customerList.map((customer) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.ListItem, { onClick: () => handleSelectItem(customer), selectable: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$i("customer-item"), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$i("name"), children: highlightOnSearchKeyword(customer.customerName || "", searchKeyword) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$i("details"), children: [
+    isOpen && customerList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(DropDown, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$j("result-container"), children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.List, { children: customerList.map((customer) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.ListItem, { onClick: () => handleSelectItem(customer), selectable: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$j("customer-item"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$j("name"), children: highlightOnSearchKeyword(customer.customerName || "", searchKeyword) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$j("details"), children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: customer.birthDate }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$i("separator"), children: "|" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$j("separator"), children: "|" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: customer.genderCode }),
         customer.baseAddress && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$i("separator"), children: "|" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$j("separator"), children: "|" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: customer.baseAddress })
         ] })
       ] })
@@ -1122,6 +1122,80 @@ const CustomerSearch = ({ onSelect }) => {
   ] });
 };
 
+const cx$i = classNames.bind(styles$2);
+const { InputBox: InputBox$2, Input: Input$2 } = salesFrontendDesignSystem.FormCore;
+function CustomerSearchModal({ isOpen, closeModal, onSelect }) {
+  const {
+    triggerRef,
+    searchInput,
+    customerList,
+    searchKeyword,
+    onSearchInputChange,
+    setSearchKeyword,
+    setSearchInput,
+    setCustomerList,
+    onKeyUp,
+    search,
+    onClear,
+    handleSelectItem
+  } = useCustomerSearch(onSelect);
+  return /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen, onClose: closeModal, modalSize: "full-screen", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uACE0\uAC1D \uAC80\uC0C9", showCloseButton: true }),
+      /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InputBox$2, { endElement: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconMainUiSearch, { onClick: search }), onClear, clearable: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input$2,
+          {
+            onChange: onSearchInputChange,
+            onKeyUp,
+            value: searchInput,
+            placeholder: "\uACE0\uAC1D\uBA85\uC744 \uB450 \uAE00\uC790 \uC774\uC0C1 \uC785\uB825\uD574\uC8FC\uC138\uC694.",
+            size: "large",
+            ref: triggerRef
+          }
+        ) }),
+        searchKeyword && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$i("result-count"), children: [
+          "\uCD1D ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: customerList.length }),
+          "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
+        ] }),
+        searchKeyword && customerList.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$i("search-result"), children: [
+          "`",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: searchKeyword }),
+          "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+        ] }),
+        searchKeyword && customerList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: customerList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.List, { rootProps: { style: { width: "100%" } }, children: customerList.map((customer) => /* @__PURE__ */ jsxRuntime.jsx(
+          salesFrontendDesignSystem.ListItem,
+          {
+            onClick: () => {
+              handleSelectItem(customer);
+              setSearchKeyword("");
+              setSearchInput("");
+              setCustomerList([]);
+              closeModal();
+            },
+            selectable: true,
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$i("customer-item", "modal"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$i("name"), children: highlightOnSearchKeyword$1(customer.customerName || "", searchKeyword) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$i("details", "modal"), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: customer.birthDate }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$i("separator"), children: "|" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: customer.genderCode }),
+                customer.baseAddress && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$i("separator"), children: "|" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: customer.baseAddress })
+                ] })
+              ] })
+            ] })
+          },
+          customer.customerId
+        )) }) })
+      ] })
+    ] })
+  ] });
+}
+
 const cx$h = classNames.bind(styles$3);
 const { InputBox: InputBox$1, Input: Input$1 } = salesFrontendDesignSystem.FormCore;
 const favoriteList = [
@@ -3983,6 +4057,7 @@ exports.Attachment = Attachment;
 exports.BankStockSearchModal = BankStockSearchModal;
 exports.CODES = CODES;
 exports.CustomerSearch = CustomerSearch;
+exports.CustomerSearchModal = CustomerSearchModal;
 exports.DeaCustomerSearchModal = DeaCustomerSearchModal;
 exports.EmployeeSearchModal = EmployeeSearchModal;
 exports.FormCheckbox = FormCheckbox;