sales-frontend-components 0.0.116 → 0.0.117

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useController } from 'react-hook-form';
-import { CheckboxButton, Checkbox, isDate, DatePicker, DateRangePicker, FormCore, Modal, Button, RadioGroup, Radio, FormField, useModalState, ModalUtils, useDropDown, List, ListItem, Table, Select, Accordion, Tab, SegmentGroup, Loading } from 'sales-frontend-design-system';
+import { CheckboxButton, Checkbox, isDate, DatePicker, DateRangePicker, FormCore, Modal, Button, RadioGroup, Radio, FormField, useModalState, ModalUtils, useDropDown, List, ListItem, convertDateString, Table, Select, Accordion, Tab, SegmentGroup, Loading } from 'sales-frontend-design-system';
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { useSearchAddressQuery, useSearchPostalCodeQuery, useSearchAddressStandardizationQuery, useSearchCommonCodeQuery, useSearchCustomerListQuery, useSearchNationalityQuery, useSearchVisaQuery, getDspCustomerListMethod, useSearchEmployeeProfileQuery, useSearchOccupationDetailQuery, useSearchOccupationQuery, useSearchVehicleQuery, useSearchRiskGradeQuery, useSearchOrganizationQuery, getRemoteIdentityVerificationSystemToken } from 'sales-frontend-api/method';
 import { IconMainUiSearch, IconGraphicsBankSaneop, IconGraphicsBankKiup, IconGraphicsBankKukmin, IconGraphicsBankSuhyeop, IconGraphicsBankJangGiSinYong, IconGraphicsBankNhNonghyeop, IconGraphicsBankJiyeokNonghyeop, IconGraphicsBankWoori, IconGraphicsBankScJeil, IconGraphicsBankSinhan, IconGraphicsBankHankookCity, IconGraphicsBankDaegu, IconGraphicsBankBusan, IconGraphicsBankGwangju, IconGraphicsBankJeju, IconGraphicsBankJeonbuk, IconGraphicsBankGyeongnam, IconGraphicsBankSaemaulGeumgo, IconGraphicsBankSinhyeop, IconGraphicsBankJeochuk, IconGraphicsBankHsbc, IconGraphicsBankABNAMRO, IconGraphicsBankSanlim, IconGraphicsBankPost, IconGraphicsBankKebHana, IconGraphicsBankKBank, IconGraphicsBankKakaoBank, IconGraphicsBankTossBank, IconGraphicsStockYuantaJeungkwon, IconGraphicsStockKbJeungkwon, IconGraphicsStockMiraeAssetJeungkwon, IconGraphicsStockSamsungJeungkwon, IconGraphicsStockHankookTujajeungkwon, IconGraphicsStockNhWooriTujajeungkwon, IconGraphicsStockGyoboJeungkwon, IconGraphicsStockHiTujajeungkwon, IconGraphicsStockHyundaiChaJeungkwon, IconGraphicsStockKiwoomJeungkwon, IconGraphicsStockSkJeungkwon, IconGraphicsStockDaesinJeungkwon, IconGraphicsStockHanwhaTujajeungkwon, IconGraphicsStockHanaGeumyungTujajeungkwon, IconGraphicsStockSinhanTujajeungkwon, IconGraphicsStockDbGeumyungTujajeungkwon, IconGraphicsStockYujinTujajeungkwon, IconGraphicsStockMeritzJeungkwon, IconGraphicsStockKakaoPayJeungkwon, IconGraphicsStockNhTujajeungkwon, IconGraphicsStockBugukJeungkwon, IconGraphicsStockSinyeongJeungkwon, IconGraphicsStockHochulEopsum, IconGraphicsFeedbackEmpty, IconIllustGrade, IconIllustJob, IconSubUiArrowRight, IconIllustVehicle, IconIllustCamera } from 'sales-frontend-assets';
@@ -219,19 +219,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__ */ 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__ */ 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);
@@ -269,14 +283,14 @@ const AddressSearchResult = ({
             value: JSON.stringify(item),
             select: item.roadNameBaseAddress === selectedAddress?.roadNameBaseAddress && item.roadNameDetailAddress === selectedAddress?.roadNameDetailAddress && item.mainBuildingName === selectedAddress?.mainBuildingName,
             label: /* @__PURE__ */ jsxs("div", { className: cx$k("search-result"), children: [
-              /* @__PURE__ */ jsx("div", { className: cx$k("zipcode"), children: highlightOnSearchKeyword$1(`${item.firstPostalCode}${item.secondPostalCode}`, searchKeyword) }),
+              /* @__PURE__ */ jsx("div", { className: cx$k("zipcode"), children: highlightOnSearchKeyword(`${item.firstPostalCode}${item.secondPostalCode}`, searchKeyword) }),
               /* @__PURE__ */ jsx("div", { className: cx$k("divider") }),
               /* @__PURE__ */ jsxs("div", { className: cx$k("address-info"), children: [
-                /* @__PURE__ */ jsx("span", { className: cx$k("address"), children: highlightOnSearchKeyword$1(
+                /* @__PURE__ */ jsx("span", { className: cx$k("address"), children: highlightOnSearchKeyword(
                   `${item.roadNameBaseAddress} ${item.roadNameDetailAddress} ${item.mainBuildingName}`,
                   searchKeyword
                 ) }),
-                /* @__PURE__ */ jsx("span", { className: cx$k("old-address"), children: highlightOnSearchKeyword$1(
+                /* @__PURE__ */ jsx("span", { className: cx$k("old-address"), children: highlightOnSearchKeyword(
                   `${item.landNumberBaseAddress} ${item.landNumberDetailAddress}`,
                   searchKeyword
                 ) })
@@ -968,7 +982,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__ */ jsx("div", { className: styles$1.item, style: { visibility: "hidden" } }, `placeholder-${chunkIndex}-${i}`))
     ] }, chunkIndex)) });
@@ -1001,10 +1015,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([]);
@@ -1041,6 +1051,12 @@ const useCustomerSearch = (onSelect) => {
       onSelect(customer);
     }
   };
+  useEffect(() => {
+    const filtered = data?.data?.custList?.filter(
+      (c) => c.customerName?.toLowerCase().includes(searchInput.toLowerCase())
+    );
+    setCustomerList(filtered || []);
+  }, [data, searchInput]);
   return {
     triggerRef,
     isOpen,
@@ -1062,22 +1078,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__ */ jsx("span", { className: "text-primary", children: targetString }, i)
-      );
-    }
-  }
-  return replacedText;
-};
 const { InputBox: InputBox$3, Input: Input$3 } = FormCore;
 const CustomerSearch = ({ onSelectCustomer, placeholder, rootProps, ...props }) => {
   const {
@@ -1106,18 +1106,30 @@ const CustomerSearch = ({ onSelectCustomer, placeholder, rootProps, ...props })
         ref: triggerRef
       }
     ) }) }),
-    isOpen && customerList.length > 0 && /* @__PURE__ */ jsx(DropDown, { children: /* @__PURE__ */ jsx("div", { className: cx$j("result-container"), children: /* @__PURE__ */ jsx(List, { children: customerList.map((customer) => /* @__PURE__ */ jsx(ListItem, { onClick: () => handleSelectItem(customer), selectable: true, children: /* @__PURE__ */ jsxs("div", { className: cx$j("customer-item"), children: [
-      /* @__PURE__ */ jsx("div", { className: cx$j("name"), children: highlightOnSearchKeyword(customer.customerName || "", searchKeyword) }),
-      /* @__PURE__ */ jsxs("div", { className: cx$j("details"), children: [
-        /* @__PURE__ */ jsx("span", { children: customer.birthDate }),
-        /* @__PURE__ */ jsx("span", { className: cx$j("separator"), children: "|" }),
-        /* @__PURE__ */ jsx("span", { children: customer.genderCode }),
-        customer.baseAddress && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: cx$j("separator"), children: "|" }),
-          /* @__PURE__ */ jsx("span", { children: customer.baseAddress })
+    isOpen && customerList.length > 0 && /* @__PURE__ */ jsx(DropDown, { children: /* @__PURE__ */ jsx("div", { className: cx$j("result-container"), children: /* @__PURE__ */ jsx(List, { children: customerList.map((customer, index) => /* @__PURE__ */ jsx(
+      ListItem,
+      {
+        onClick: () => handleSelectItem(customer),
+        selectable: true,
+        children: /* @__PURE__ */ jsxs("div", { className: cx$j("customer-item"), children: [
+          /* @__PURE__ */ jsx("div", { className: cx$j("name"), children: highlightOnSearchKeyword(customer.customerName || "", searchKeyword) }),
+          /* @__PURE__ */ jsxs("div", { className: cx$j("details"), children: [
+            /* @__PURE__ */ jsx("span", { children: customer.birthDate && convertDateString({
+              dateString: customer.birthDate,
+              fromFormat: "YYYYMMDD",
+              toFormat: "YYYY.MM.DD"
+            }) }),
+            /* @__PURE__ */ jsx("span", { className: cx$j("separator"), children: "|" }),
+            /* @__PURE__ */ jsx("span", { children: getGenderName(customer.genderCode) }),
+            customer.baseAddress && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: cx$j("separator"), children: "|" }),
+              /* @__PURE__ */ jsx("span", { children: customer.baseAddress })
+            ] })
+          ] })
         ] })
-      ] })
-    ] }) }, customer.customerId)) }) }) })
+      },
+      `cust-item-${customer.customerId}-${index}`
+    )) }) }) })
   ] });
 };
 
@@ -1164,7 +1176,7 @@ function CustomerSearchModal({ isOpen, closeModal, onSelect }) {
           /* @__PURE__ */ jsx("span", { className: "text-primary", children: searchKeyword }),
           "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
         ] }),
-        searchKeyword && customerList.length > 0 && /* @__PURE__ */ jsx("div", { children: customerList.length > 0 && /* @__PURE__ */ jsx(List, { rootProps: { style: { width: "100%" } }, children: customerList.map((customer) => /* @__PURE__ */ jsx(
+        searchKeyword && customerList.length > 0 && /* @__PURE__ */ jsx("div", { children: customerList.length > 0 && /* @__PURE__ */ jsx(List, { rootProps: { style: { width: "100%" } }, children: customerList.map((customer, index) => /* @__PURE__ */ jsx(
           ListItem,
           {
             onClick: () => {
@@ -1176,11 +1188,15 @@ function CustomerSearchModal({ isOpen, closeModal, onSelect }) {
             },
             selectable: true,
             children: /* @__PURE__ */ jsxs("div", { className: cx$i("customer-item", "modal"), children: [
-              /* @__PURE__ */ jsx("div", { className: cx$i("name"), children: highlightOnSearchKeyword$1(customer.customerName || "", searchKeyword) }),
+              /* @__PURE__ */ jsx("div", { className: cx$i("name"), children: highlightOnSearchKeyword(customer.customerName || "", searchKeyword) }),
               /* @__PURE__ */ jsxs("div", { className: cx$i("details", "modal"), children: [
-                /* @__PURE__ */ jsx("span", { children: customer.birthDate }),
+                /* @__PURE__ */ jsx("span", { children: customer.birthDate && convertDateString({
+                  dateString: customer.birthDate,
+                  fromFormat: "YYYYMMDD",
+                  toFormat: "YYYY.MM.DD"
+                }) }),
                 /* @__PURE__ */ jsx("span", { className: cx$i("separator"), children: "|" }),
-                /* @__PURE__ */ jsx("span", { children: customer.genderCode }),
+                /* @__PURE__ */ jsx("span", { children: getGenderName(customer.genderCode) }),
                 customer.baseAddress && /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx("span", { className: cx$i("separator"), children: "|" }),
                   /* @__PURE__ */ jsx("span", { children: customer.baseAddress })
@@ -1188,7 +1204,7 @@ function CustomerSearchModal({ isOpen, closeModal, onSelect }) {
               ] })
             ] })
           },
-          customer.customerId
+          `cust-item-${customer.customerId}-${index}`
         )) }) })
       ] })
     ] })
@@ -1239,7 +1255,7 @@ const NationalitySearchInitialText = ({
   };
   return /* @__PURE__ */ jsxs("div", { className: cx$h("favorite-container"), children: [
     /* @__PURE__ */ jsx("p", { className: cx$h("favorite-title"), children: "\uB9CE\uC774 \uCC3E\uB294 \uAD6D\uC801" }),
-    /* @__PURE__ */ jsx("ul", { className: cx$h("favorite"), children: favoriteList.map((item) => /* @__PURE__ */ jsx("li", { onClick: () => set(item.nationalityCodeName), children: /* @__PURE__ */ jsx("button", { children: item.nationalityCodeName }) }, item.nationalityCode)) })
+    /* @__PURE__ */ jsx("ul", { className: cx$h("favorite"), children: favoriteList.map((item, index) => /* @__PURE__ */ jsx("li", { onClick: () => set(item.nationalityCodeName), children: /* @__PURE__ */ jsx("button", { children: item.nationalityCodeName }) }, `${item.nationalityCode}-${index}`)) })
   ] });
 };
 const NationalitySearchResult = ({ nationalityList, searchKeyWord, onSelect }) => {
@@ -1255,7 +1271,7 @@ const NationalitySearchResult = ({ nationalityList, searchKeyWord, onSelect }) =
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
     /* @__PURE__ */ jsx("ul", { className: cx$h("favorite"), children: filterList.length > 0 && filterList.map((item, index) => {
-      return /* @__PURE__ */ jsx("li", { onClick: () => onSelect(item.nationalityCodeName), children: /* @__PURE__ */ jsx("button", { children: highlightOnSearchKeyword$1(item.nationalityCodeName, searchKeyWord) }) }, `${index}-${item.nationalityCode}`);
+      return /* @__PURE__ */ jsx("li", { onClick: () => onSelect(item.nationalityCodeName), children: /* @__PURE__ */ jsx("button", { children: highlightOnSearchKeyword(item.nationalityCodeName, searchKeyWord) }) }, `${index}-${item.nationalityCode}`);
     }) }),
     filterList.length === 0 && /* @__PURE__ */ jsxs("div", { className: cx$h("search-result"), children: [
       "`",
@@ -1679,7 +1695,7 @@ const VisaSearchResult = ({ visaList, searchKeyword, onSelect }) => {
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
     /* @__PURE__ */ jsx("ul", { className: cx$g("favorite"), children: filterList.length > 0 && filterList.map((item, index) => {
-      return /* @__PURE__ */ jsx("li", { onClick: () => onSelect(item), children: /* @__PURE__ */ jsx("button", { children: highlightOnSearchKeyword$1(`${item.integrationCodeValueName}`, searchKeyword) }) }, `${index}-${item.integrationCodeValueName}`);
+      return /* @__PURE__ */ jsx("li", { onClick: () => onSelect(item), children: /* @__PURE__ */ jsx("button", { children: highlightOnSearchKeyword(`${item.integrationCodeValueName}`, searchKeyword) }) }, `${index}-${item.integrationCodeValueName}`);
     }) }),
     filterList.length === 0 && /* @__PURE__ */ jsxs("div", { className: cx$g("search-result"), children: [
       "`",
@@ -1813,7 +1829,7 @@ function DeaCustomerSearchResult({
         /* @__PURE__ */ jsx("th", { className: cx$f("th-padding"), children: "\uC804\uD654\uBC88\uD638" }),
         /* @__PURE__ */ jsx("th", { className: cx$f("th-padding"), children: "\uC8FC\uC18C" })
       ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: customerList.length > 0 ? customerList.map((customer) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("tbody", { children: customerList.length > 0 ? customerList.map((customer, index) => /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
           "input",
           {
@@ -1830,7 +1846,7 @@ function DeaCustomerSearchResult({
         /* @__PURE__ */ jsx("td", { children: customer.occupationKindName }),
         /* @__PURE__ */ jsx("td", { children: customer.mobilePhoneNumber }),
         /* @__PURE__ */ jsx("td", { children: customer.address })
-      ] }, customer.customerId)) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxs("div", { className: cx$f("no-result"), children: [
+      ] }, `cust-item-${customer.customerId}-${index}}`)) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxs("div", { className: cx$f("no-result"), children: [
         /* @__PURE__ */ jsx(IconGraphicsFeedbackEmpty, {}),
         /* @__PURE__ */ jsx("p", { children: "\uC870\uD68C \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
         /* @__PURE__ */ jsx("p", { children: "\uC785\uB825\uD55C \uC815\uBCF4\uB97C \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694." })
@@ -2105,7 +2121,7 @@ function EmployeeSearch({
             onChange: (value) => onTabChange(value),
             className: styles$6.select,
             size: "medium",
-            children: EMPLOYEE_SEARCH_TABS.map((option) => /* @__PURE__ */ jsx(Select.Option, { value: option.value, children: option.label }, option.value))
+            children: EMPLOYEE_SEARCH_TABS.map((option, index) => /* @__PURE__ */ jsx(Select.Option, { value: option.value, children: option.label }, `${option.value}-${index}`))
           }
         )
       ] }),
@@ -2277,7 +2293,7 @@ function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
         id: `item-${job.occupationIndustryCode}-${index}-accordion`,
         children: [
           /* @__PURE__ */ jsx(Accordion.HeaderDiv, { children: /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs(Radio.Item, { size: "small", value: job.occupationIndustryCode, onChange: () => onJobSelect(job), children: [
-            highlightOnSearchKeyword$1(job.occupationIndustryName, searchTerm),
+            highlightOnSearchKeyword(job.occupationIndustryName, searchTerm),
             "(",
             job.occupationIndustryCode,
             ")"
@@ -2362,7 +2378,7 @@ function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
               onChange: () => {
                 onJobSelect(job);
               },
-              children: highlightOnSearchKeyword$1(job.occupationIndustryName, searchTerm)
+              children: highlightOnSearchKeyword(job.occupationIndustryName, searchTerm)
             }
           ) }) }),
           /* @__PURE__ */ jsx(Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsx(
@@ -2419,7 +2435,7 @@ function JobSearch({
         size: "small",
         variant: "sub",
         style: { gap: 0, overflow: "visible" },
-        children: JOB_SEARCH_TABS.map((tab) => /* @__PURE__ */ jsx(Tab.Item, { value: tab.value, children: tab.label }, tab.value))
+        children: JOB_SEARCH_TABS.map((tab, index) => /* @__PURE__ */ jsx(Tab.Item, { value: tab.value, children: tab.label }, `${tab.value}-${index}`))
       }
     ),
     /* @__PURE__ */ jsxs("div", { children: [
@@ -2960,7 +2976,7 @@ function OrganizationSearchResult({
         /* @__PURE__ */ jsx("th", { className: cx$4("th-padding"), children: "\uAE30\uAD00\uCF54\uB4DC" }),
         /* @__PURE__ */ jsx("th", { className: cx$4("th-padding"), children: "\uAE30\uAD00\uBA85" })
       ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: filteredOrganizations.map((organization) => {
+      /* @__PURE__ */ jsx("tbody", { children: filteredOrganizations.map((organization, index) => {
         return /* @__PURE__ */ jsxs("tr", { children: [
           /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
             "input",
@@ -2973,7 +2989,7 @@ function OrganizationSearchResult({
           ) }),
           /* @__PURE__ */ jsx("td", { children: organization.organizationCode }),
           /* @__PURE__ */ jsx("td", { children: organization.organizationName })
-        ] }, organization.organizationCode);
+        ] }, `${organization.organizationCode}-${index}`);
       }) })
     ] }) : /* @__PURE__ */ jsxs(Table, { variant: "horizontal", children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [