sales-frontend-components 0.0.115 → 0.0.117

package/dist/index.cjs.js

@@ -221,19 +221,33 @@ function requireBind () {
 var bindExports = requireBind();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(bindExports);
 
-const highlightOnSearchKeyword$1 = (originalText, targetString) => {
-  if (originalText?.includes(targetString)) {
-    const replacedText = [];
-    const splitText = originalText.split(targetString);
-    for (let i = 0; i < splitText.length; i++) {
-      replacedText.push(splitText[i]);
-      if (i !== splitText.length - 1) {
-        replacedText.push(/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: targetString }));
-      }
+const highlightOnSearchKeyword = (originalText, targetString) => {
+  if (!targetString || !originalText?.includes(targetString)) {
+    return originalText;
+  }
+  const replacedText = [];
+  const splitText = originalText.split(targetString);
+  for (let i = 0; i < splitText.length; i++) {
+    replacedText.push(splitText[i] || "");
+    if (i < splitText.length - 1) {
+      replacedText.push(
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: targetString }, `search-keyword-highlight-${i}-${Math.random()}`)
+      );
     }
-    return replacedText;
   }
-  return originalText;
+  return replacedText;
+};
+const getGenderName = (genderCode) => {
+  switch (genderCode) {
+    case "1":
+    case "3":
+      return "\uB0A8\uC131";
+    case "2":
+    case "4":
+      return "\uC5EC\uC131";
+    default:
+      return "";
+  }
 };
 
 const cx$k = classNames.bind(styles);
@@ -271,14 +285,14 @@ const AddressSearchResult = ({
             value: JSON.stringify(item),
             select: item.roadNameBaseAddress === selectedAddress?.roadNameBaseAddress && item.roadNameDetailAddress === selectedAddress?.roadNameDetailAddress && item.mainBuildingName === selectedAddress?.mainBuildingName,
             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("zipcode"), children: highlightOnSearchKeyword(`${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(
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$k("address"), children: highlightOnSearchKeyword(
                   `${item.roadNameBaseAddress} ${item.roadNameDetailAddress} ${item.mainBuildingName}`,
                   searchKeyword
                 ) }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$k("old-address"), children: highlightOnSearchKeyword$1(
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$k("old-address"), children: highlightOnSearchKeyword(
                   `${item.landNumberBaseAddress} ${item.landNumberDetailAddress}`,
                   searchKeyword
                 ) })
@@ -970,7 +984,7 @@ function BankStockSearchModal({ open, onClose, onSelect }) {
             " ",
             convertedItem?.replaceName
           ] })
-        ] }, item.codeVal);
+        ] }, `${item.codeVal}-${chunkIndex}`);
       }),
       chunk2.length < 5 && Array.from({ length: 5 - chunk2.length }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.item, style: { visibility: "hidden" } }, `placeholder-${chunkIndex}-${i}`))
     ] }, chunkIndex)) });
@@ -1003,10 +1017,6 @@ const useCustomerSearch = (onSelect) => {
   const search = () => {
     if (searchInput.length >= 2) {
       setSearchKeyword(searchInput);
-      const filtered = data?.data?.custList?.filter(
-        (c) => c.customerName?.toLowerCase().includes(searchInput.toLowerCase())
-      );
-      setCustomerList(filtered || []);
       setIsOpen(true);
     } else {
       setCustomerList([]);
@@ -1043,6 +1053,12 @@ const useCustomerSearch = (onSelect) => {
       onSelect(customer);
     }
   };
+  React.useEffect(() => {
+    const filtered = data?.data?.custList?.filter(
+      (c) => c.customerName?.toLowerCase().includes(searchInput.toLowerCase())
+    );
+    setCustomerList(filtered || []);
+  }, [data, searchInput]);
   return {
     triggerRef,
     isOpen,
@@ -1064,22 +1080,6 @@ const useCustomerSearch = (onSelect) => {
 };
 
 const cx$j = classNames.bind(styles$2);
-const highlightOnSearchKeyword = (originalText, targetString) => {
-  if (!targetString || !originalText?.includes(targetString)) {
-    return originalText;
-  }
-  const replacedText = [];
-  const splitText = originalText.split(targetString);
-  for (let i = 0; i < splitText.length; i++) {
-    replacedText.push(splitText[i] || "");
-    if (i < splitText.length - 1) {
-      replacedText.push(
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: targetString }, i)
-      );
-    }
-  }
-  return replacedText;
-};
 const { InputBox: InputBox$3, Input: Input$3 } = salesFrontendDesignSystem.FormCore;
 const CustomerSearch = ({ onSelectCustomer, placeholder, rootProps, ...props }) => {
   const {
@@ -1108,18 +1108,30 @@ const CustomerSearch = ({ onSelectCustomer, placeholder, rootProps, ...props })
         ref: triggerRef
       }
     ) }) }),
-    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$j("separator"), children: "|" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: customer.genderCode }),
-        customer.baseAddress && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$j("separator"), children: "|" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: customer.baseAddress })
+    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, index) => /* @__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 && salesFrontendDesignSystem.convertDateString({
+              dateString: customer.birthDate,
+              fromFormat: "YYYYMMDD",
+              toFormat: "YYYY.MM.DD"
+            }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$j("separator"), children: "|" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: getGenderName(customer.genderCode) }),
+            customer.baseAddress && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$j("separator"), children: "|" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: customer.baseAddress })
+            ] })
+          ] })
         ] })
-      ] })
-    ] }) }, customer.customerId)) }) }) })
+      },
+      `cust-item-${customer.customerId}-${index}`
+    )) }) }) })
   ] });
 };
 
@@ -1166,7 +1178,7 @@ function CustomerSearchModal({ isOpen, closeModal, onSelect }) {
           /* @__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(
+        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, index) => /* @__PURE__ */ jsxRuntime.jsx(
           salesFrontendDesignSystem.ListItem,
           {
             onClick: () => {
@@ -1178,11 +1190,15 @@ function CustomerSearchModal({ isOpen, closeModal, onSelect }) {
             },
             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.jsx("div", { className: cx$i("name"), children: highlightOnSearchKeyword(customer.customerName || "", searchKeyword) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$i("details", "modal"), children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: customer.birthDate }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: customer.birthDate && salesFrontendDesignSystem.convertDateString({
+                  dateString: customer.birthDate,
+                  fromFormat: "YYYYMMDD",
+                  toFormat: "YYYY.MM.DD"
+                }) }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$i("separator"), children: "|" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: customer.genderCode }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: getGenderName(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 })
@@ -1190,7 +1206,7 @@ function CustomerSearchModal({ isOpen, closeModal, onSelect }) {
               ] })
             ] })
           },
-          customer.customerId
+          `cust-item-${customer.customerId}-${index}`
         )) }) })
       ] })
     ] })
@@ -1241,7 +1257,7 @@ const NationalitySearchInitialText = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$h("favorite-container"), children: [
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx$h("favorite-title"), children: "\uB9CE\uC774 \uCC3E\uB294 \uAD6D\uC801" }),
-    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$h("favorite"), children: favoriteList.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { onClick: () => set(item.nationalityCodeName), children: /* @__PURE__ */ jsxRuntime.jsx("button", { children: item.nationalityCodeName }) }, item.nationalityCode)) })
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$h("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}`)) })
   ] });
 };
 const NationalitySearchResult = ({ nationalityList, searchKeyWord, onSelect }) => {
@@ -1257,7 +1273,7 @@ const NationalitySearchResult = ({ nationalityList, searchKeyWord, onSelect }) =
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$h("favorite"), children: filterList.length > 0 && filterList.map((item, index) => {
-      return /* @__PURE__ */ jsxRuntime.jsx("li", { onClick: () => onSelect(item.nationalityCodeName), children: /* @__PURE__ */ jsxRuntime.jsx("button", { children: highlightOnSearchKeyword$1(item.nationalityCodeName, searchKeyWord) }) }, `${index}-${item.nationalityCode}`);
+      return /* @__PURE__ */ jsxRuntime.jsx("li", { onClick: () => onSelect(item.nationalityCodeName), children: /* @__PURE__ */ jsxRuntime.jsx("button", { children: highlightOnSearchKeyword(item.nationalityCodeName, searchKeyWord) }) }, `${index}-${item.nationalityCode}`);
     }) }),
     filterList.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$h("search-result"), children: [
       "`",
@@ -1681,7 +1697,7 @@ const VisaSearchResult = ({ visaList, searchKeyword, onSelect }) => {
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$g("favorite"), children: filterList.length > 0 && filterList.map((item, index) => {
-      return /* @__PURE__ */ jsxRuntime.jsx("li", { onClick: () => onSelect(item), children: /* @__PURE__ */ jsxRuntime.jsx("button", { children: highlightOnSearchKeyword$1(`${item.integrationCodeValueName}`, searchKeyword) }) }, `${index}-${item.integrationCodeValueName}`);
+      return /* @__PURE__ */ jsxRuntime.jsx("li", { onClick: () => onSelect(item), children: /* @__PURE__ */ jsxRuntime.jsx("button", { children: highlightOnSearchKeyword(`${item.integrationCodeValueName}`, searchKeyword) }) }, `${index}-${item.integrationCodeValueName}`);
     }) }),
     filterList.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$g("search-result"), children: [
       "`",
@@ -1815,7 +1831,7 @@ function DeaCustomerSearchResult({
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$f("th-padding"), children: "\uC804\uD654\uBC88\uD638" }),
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$f("th-padding"), children: "\uC8FC\uC18C" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: customerList.length > 0 ? customerList.map((customer) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: customerList.length > 0 ? customerList.map((customer, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -1832,7 +1848,7 @@ function DeaCustomerSearchResult({
         /* @__PURE__ */ jsxRuntime.jsx("td", { children: customer.occupationKindName }),
         /* @__PURE__ */ jsxRuntime.jsx("td", { children: customer.mobilePhoneNumber }),
         /* @__PURE__ */ jsxRuntime.jsx("td", { children: customer.address })
-      ] }, customer.customerId)) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$f("no-result"), children: [
+      ] }, `cust-item-${customer.customerId}-${index}}`)) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$f("no-result"), children: [
         /* @__PURE__ */ jsxRuntime.jsx(salesFrontendAssets.IconGraphicsFeedbackEmpty, {}),
         /* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uC870\uD68C \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uC785\uB825\uD55C \uC815\uBCF4\uB97C \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694." })
@@ -2107,7 +2123,7 @@ function EmployeeSearch({
             onChange: (value) => onTabChange(value),
             className: styles$6.select,
             size: "medium",
-            children: EMPLOYEE_SEARCH_TABS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Select.Option, { value: option.value, children: option.label }, option.value))
+            children: EMPLOYEE_SEARCH_TABS.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Select.Option, { value: option.value, children: option.label }, `${option.value}-${index}`))
           }
         )
       ] }),
@@ -2279,7 +2295,7 @@ function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
         id: `item-${job.occupationIndustryCode}-${index}-accordion`,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.HeaderDiv, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Radio.Item, { size: "small", value: job.occupationIndustryCode, onChange: () => onJobSelect(job), children: [
-            highlightOnSearchKeyword$1(job.occupationIndustryName, searchTerm),
+            highlightOnSearchKeyword(job.occupationIndustryName, searchTerm),
             "(",
             job.occupationIndustryCode,
             ")"
@@ -2364,7 +2380,7 @@ function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
               onChange: () => {
                 onJobSelect(job);
               },
-              children: highlightOnSearchKeyword$1(job.occupationIndustryName, searchTerm)
+              children: highlightOnSearchKeyword(job.occupationIndustryName, searchTerm)
             }
           ) }) }),
           /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2421,7 +2437,7 @@ function JobSearch({
         size: "small",
         variant: "sub",
         style: { gap: 0, overflow: "visible" },
-        children: JOB_SEARCH_TABS.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Tab.Item, { value: tab.value, children: tab.label }, tab.value))
+        children: JOB_SEARCH_TABS.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Tab.Item, { value: tab.value, children: tab.label }, `${tab.value}-${index}`))
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -2962,7 +2978,7 @@ function OrganizationSearchResult({
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$4("th-padding"), children: "\uAE30\uAD00\uCF54\uB4DC" }),
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$4("th-padding"), children: "\uAE30\uAD00\uBA85" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: filteredOrganizations.map((organization) => {
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: filteredOrganizations.map((organization, index) => {
         return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(
             "input",
@@ -2975,7 +2991,7 @@ function OrganizationSearchResult({
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("td", { children: organization.organizationCode }),
           /* @__PURE__ */ jsxRuntime.jsx("td", { children: organization.organizationName })
-        ] }, organization.organizationCode);
+        ] }, `${organization.organizationCode}-${index}`);
       }) })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Table, { variant: "horizontal", children: [
       /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [