sales-frontend-components 0.0.79 → 0.0.81

package/dist/index.cjs.js

@@ -283,6 +283,73 @@ function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
   ] }) });
 }
 
+function JobSearchDetail({ occupationTypeCode, occupationIndustryCode }) {
+  const { data: detail } = method.useSearchOccupationDetailQuery({
+    occupationIndustryCode,
+    occupationIndustryTypeCode: occupationTypeCode
+  });
+  if (!detail || !detail.data) {
+    return null;
+  }
+  const {
+    /** @description 직종해설내용 */
+    occupationExplanationContent,
+    /** @description 직업예시명 */
+    occupationExampleName,
+    /** @description 위험등급명 */
+    riskGradeName,
+    /** @description 위험등급코드 */
+    riskGradeCode,
+    /** @description 상해위험등급코드명 */
+    injuryRiskGradeCodeName,
+    /** @description 상해위험등급코드 */
+    injuryRiskGradeCode,
+    /** @description 입원등급코드명 */
+    hospitalizationGradeCodeName,
+    /** @description 입원등급코드 */
+    hospitalizationGradeCode,
+    /** @description 상해직종코드 */
+    injuryOccupationCode
+  } = detail.data;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Table, { variant: "horizontal", children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-small", children: "\uC9C1\uC885 \uD574\uC124" }),
+      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-small", children: occupationExplanationContent })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-small", children: "\uC9C1\uC885 \uC608\uC2DC" }),
+      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-small", children: occupationExampleName })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-small", children: "\uC704\uD5D8 \uB4F1\uAE09" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "px-small", children: [
+        riskGradeName,
+        "(",
+        riskGradeCode,
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-small", children: "\uC785\uC6D0 \uB4F1\uAE09" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "px-small", children: [
+        hospitalizationGradeCodeName,
+        "(",
+        hospitalizationGradeCode,
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-small", children: "\uC0C1\uD574 \uB4F1\uAE09" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "px-small", children: [
+        injuryRiskGradeCodeName,
+        "(",
+        injuryRiskGradeCode,
+        ")"
+      ] })
+    ] })
+  ] }) }) });
+}
+
 const cx$d = classNames.bind(styles);
 function JobSearchFavorite({ filteredJobs, onJobSelect }) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$d("popular-jobs"), children: [
@@ -308,7 +375,13 @@ function JobSearchFavorite({ filteredJobs, onJobSelect }) {
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: "\uD56D\uBAA9 1 \uB0B4\uC6A9" })
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsxRuntime.jsx(
+            JobSearchDetail,
+            {
+              occupationTypeCode: job.occupationTypeCode || "",
+              occupationIndustryCode: job.occupationIndustryCode
+            }
+          ) })
         ]
       },
       `item-${job.occupationIndustryCode}-${index}`
@@ -341,22 +414,13 @@ function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
               children: highlightOnSearchKeyword$1(job.occupationIndustryName, searchTerm)
             }
           ) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Table, { variant: "horizontal", children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 1" }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-24", children: "1\uD589 1\uBC88\uC9F8" }),
-              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 1-2" }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-24 ", children: "1\uD589 2\uBC88\uC9F8" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 2" }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "pl-24 pr-16", colSpan: 3, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "d-flex-center-center", children: [
-                "2\uD589 1\uBC88\uC9F8 ",
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 pipe-left", children: "\uC11C\uBE0C\uD14D\uC2A4\uD2B8" }),
-                /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", size: "xsmall", appearance: "outline", children: "\uBC84\uD2BC\uBA85" })
-              ] }) })
-            ] })
-          ] }) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsxRuntime.jsx(
+            JobSearchDetail,
+            {
+              occupationTypeCode: job.occupationTypeCode || "",
+              occupationIndustryCode: job.occupationIndustryCode
+            }
+          ) })
         ]
       },
       job.occupationIndustryCode
@@ -1390,7 +1454,7 @@ const testSignatureBase64Data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA
 const cx$8 = classNames.bind(styles$3);
 const { InputBox: InputBox$1, Input: Input$1 } = salesFrontendDesignSystem.FormCore;
 const AddressSearchInitialText = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("search-result-list"), children: [
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx$8("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
     /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: cx$8("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" }),
@@ -1408,38 +1472,36 @@ const AddressSearchResult = ({
   searchKeyword,
   selectedAddress
 }) => {
-  const [filterList, setFilterList] = React.useState([]);
-  React.useEffect(() => {
-    const filterList2 = addressSearchList.filter(
-      (item) => item.address.includes(searchKeyword) || item.oldAddress.includes(searchKeyword)
-    ) || [];
-    setFilterList(filterList2);
-  }, [addressSearchList, searchKeyword]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("search-result-list"), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$8("guide-title"), children: [
       "\uCD1D ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filterList.length }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: addressSearchList.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
-    filterList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+    addressSearchList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
       salesFrontendDesignSystem.RadioGroup,
       {
-        items: filterList.map((item) => ({
-          value: item.address,
-          select: item.address === selectedAddress?.address && item.zipCode === selectedAddress?.zipCode,
-          label: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("search-result"), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("zipcode"), children: [
-              " ",
-              highlightOnSearchKeyword$1(item.zipCode, searchKeyword)
+        items: addressSearchList.map((item) => {
+          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$8("search-result"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("zipcode"), children: highlightOnSearchKeyword$1(`${item.firstPostalCode}${item.secondPostalCode}`, searchKeyword) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("divider") }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("address-info"), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$8("address"), children: highlightOnSearchKeyword$1(
+                  `${item.roadNameBaseAddress} ${item.roadNameDetailAddress} ${item.mainBuildingName}`,
+                  searchKeyword
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$8("old-address"), children: highlightOnSearchKeyword$1(
+                  `${item.landNumberBaseAddress} ${item.landNumberDetailAddress}`,
+                  searchKeyword
+                ) })
+              ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("divider") }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("address-info"), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$8("address"), children: highlightOnSearchKeyword$1(item.address, searchKeyword) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$8("old-address"), children: highlightOnSearchKeyword$1(item.oldAddress, searchKeyword) })
-            ] })
-          ] }),
-          id: item.address
-        })),
+            id: JSON.stringify(item)
+          };
+        }),
         className: cx$8("radio-group"),
         name: "address-search",
         size: "medium",
@@ -1447,7 +1509,7 @@ const AddressSearchResult = ({
         onChange
       }
     ),
-    filterList.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    addressSearchList.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       "`",
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: searchKeyword }),
       "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
@@ -1455,30 +1517,52 @@ const AddressSearchResult = ({
   ] });
 };
 const AddressSearchDetailInput = ({
-  selectedAddress,
+  addressStandardizationList,
   onDetailChange,
+  onStandardizationChange,
   step,
   detailAddressInput
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        " ",
-        selectedAddress.zipCode
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        "|",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: `${selectedAddress.address}` })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("search-result-list"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      salesFrontendDesignSystem.RadioGroup,
+      {
+        items: addressStandardizationList.map((item) => {
+          return {
+            value: JSON.stringify(item),
+            select: true,
+            label: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("search-result"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("zipcode"), children: `${item.firstPostalCode}${item.secondPostalCode}` }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("divider") }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("address-info"), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$8("address"), children: `${item.baseAddress} ${item.detailAddress}` }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$8("old-address"), children: `${item.baseAddress} ${item.detailAddress}` })
+              ] })
+            ] }),
+            id: JSON.stringify(item)
+          };
+        }),
+        className: cx$8("radio-group"),
+        name: "address-search-standardization",
+        size: "medium",
+        defaultValue: "",
+        onChange: onStandardizationChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "d-flex gap-medium items-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.FormField.Label, { id: "detail", style: { width: "90px" }, children: "\uC0C1\uC138\uC8FC\uC18C" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Input$1,
+        salesFrontendDesignSystem.FormField.TextField,
         {
+          rootProps: {
+            style: {
+              display: "flex",
+              flex: 1
+            }
+          },
           placeholder: "\uC0C1\uC138\uC8FC\uC18C \uC785\uB825",
           onChange: onDetailChange,
-          size: "large",
+          size: "small",
           value: detailAddressInput,
           ...step === "detail-input" && { autoFocus: true }
         }
@@ -1501,7 +1585,9 @@ function AddressComponent({ isOpen, onClose, setValue }) {
     setDetail,
     search,
     searchInput,
-    selectedAddress
+    selectedAddress,
+    onStandardizationChange,
+    addressStandardizationList
   } = useSearchAddress({
     setValue,
     onClose,
@@ -1528,7 +1614,7 @@ function AddressComponent({ isOpen, onClose, setValue }) {
           AddressSearchResult,
           {
             onChange: onSelectChange,
-            addressSearchList: addressSearchList || [],
+            addressSearchList,
             searchKeyword: addressSearchKeyword,
             selectedAddress
           }
@@ -1536,7 +1622,8 @@ function AddressComponent({ isOpen, onClose, setValue }) {
         addressSearchStep === "detail-input" && selectedAddress && /* @__PURE__ */ jsxRuntime.jsx(
           AddressSearchDetailInput,
           {
-            selectedAddress,
+            addressStandardizationList,
+            onStandardizationChange,
             onDetailChange: setDetail,
             step: addressSearchStep,
             detailAddressInput
@@ -1565,21 +1652,48 @@ function AddressComponent({ isOpen, onClose, setValue }) {
 function useSearchAddress({ setValue, onClose, isOpen }) {
   const [searchKeyword, setSearchKeyword] = React.useState("");
   const [step, setStep] = React.useState("initial");
-  const [selectedAddress, setSelectedAddress] = React.useState(null);
+  const [selectedAddress, setSelectedAddress] = React.useState();
+  const [selectedStandardizationAddress, setSelectedStandardizationAddress] = React.useState();
   const [searchInput, setSearchInput] = React.useState("");
   const [detailAddressInput, setDetailAddressInput] = React.useState("");
-  const { data: addressList } = method.useSearchModalAddressQuery({ searchKeyword });
+  const [displayList, setDisplayList] = React.useState([]);
+  const [searchType, setSearchType] = React.useState("address");
+  const [standardizationParams, setStandardizationParams] = React.useState({
+    firstPostalCode: "",
+    secondPostalCode: "",
+    baseAddress: "",
+    detailAddress: "",
+    roadNameYn: "Y"
+  });
+  const { data: addressData } = method.useSearchAddressQuery(
+    { searchKeyWord: searchKeyword },
+    { enabled: !!searchKeyword && searchType === "address" }
+  );
+  const { data: postalData } = method.useSearchPostalCodeQuery(
+    { searchWordName: searchKeyword },
+    { enabled: !!searchKeyword && searchType === "postalcode" }
+  );
+  const { data: standardizedData } = method.useSearchAddressStandardizationQuery(standardizationParams, {
+    enabled: !!standardizationParams?.baseAddress
+  });
   const [nextButtonDisabled, setNextButtonDisabled] = React.useState(false);
   const onNext = () => {
     if (step === "search-result") {
       setStep("detail-input");
       setNextButtonDisabled(true);
+      if (selectedAddress) {
+        setStandardizationParams({
+          firstPostalCode: selectedAddress.firstPostalCode,
+          secondPostalCode: selectedAddress.secondPostalCode,
+          baseAddress: selectedAddress.roadNameBaseAddress,
+          detailAddress: selectedAddress.roadNameDetailAddress,
+          roadNameYn: "Y"
+        });
+      }
     } else {
-      setValue({
-        address: selectedAddress?.address || "",
-        oldAddress: selectedAddress?.oldAddress || "",
-        zipCode: selectedAddress?.zipCode || "",
-        detail: detailAddressInput || ""
+      selectedStandardizationAddress && setValue({
+        ...selectedStandardizationAddress,
+        detailAddressInput
       });
       onClose();
     }
@@ -1594,9 +1708,11 @@ function useSearchAddress({ setValue, onClose, isOpen }) {
       return;
     }
     if (searchInput && searchInput.length > 1) {
+      const isNumeric = /^[0-9]+$/.test(searchInput);
+      setSearchType(isNumeric ? "postalcode" : "address");
       setSearchKeyword(searchInput);
       setStep("search-result");
-      setSelectedAddress(null);
+      setSelectedAddress(void 0);
       setDetailAddressInput("");
       setNextButtonDisabled(true);
     }
@@ -1607,19 +1723,23 @@ function useSearchAddress({ setValue, onClose, isOpen }) {
     }
   };
   const onSelectChange = (e) => {
-    const selectedAddress2 = e.target.value;
-    if (selectedAddress2) {
-      const adr = addressList?.find((addr) => {
-        return addr.address === selectedAddress2;
-      });
-      setSelectedAddress(adr || null);
+    const selected = e.target.value;
+    if (selected) {
+      setSelectedAddress(JSON.parse(selected));
+      setNextButtonDisabled(false);
+    }
+  };
+  const onStandardizationChange = (e) => {
+    const selected = e.target.value;
+    if (selected) {
+      setSelectedStandardizationAddress(JSON.parse(selected));
       setNextButtonDisabled(false);
     }
   };
   const onClear = React.useCallback(() => {
     setSearchKeyword("");
     setSearchInput("");
-    setSelectedAddress(null);
+    setSelectedAddress(void 0);
     setDetailAddressInput("");
     setStep("initial");
   }, []);
@@ -1632,19 +1752,39 @@ function useSearchAddress({ setValue, onClose, isOpen }) {
       setNextButtonDisabled(true);
     }
   };
+  React.useEffect(() => {
+    if (searchType === "address" && addressData?.data?.addressList) {
+      setDisplayList(addressData.data.addressList);
+    } else if (searchType === "postalcode" && postalData?.data?.postalCodeList) {
+      console.log("transformedList", postalData.data.postalCodeList);
+      const transformedList = postalData.data.postalCodeList.map((p) => ({
+        firstPostalCode: p.originalNumber1PostalCode,
+        secondPostalCode: p.originalNumber2PostalCode,
+        roadNameBaseAddress: p.roadNameBaseAddress,
+        roadNameDetailAddress: p.roadNameDetailAddress,
+        landNumberBaseAddress: p.landNumberBaseAddress,
+        landNumberDetailAddress: p.landNumberDetailAddress,
+        mainBuildingName: p.mainBuildingName
+      }));
+      setDisplayList(transformedList);
+    }
+  }, [addressData, postalData, searchType]);
   React.useEffect(() => {
     if (isOpen) {
-      setSelectedAddress(null);
+      setSelectedAddress(void 0);
       setDetailAddressInput("");
       setStep("initial");
       setSearchKeyword("");
     }
   }, [isOpen]);
   return {
+    addressStandardizationList: standardizedData?.data?.addressStandardizationList || [],
+    selectedStandardizationAddress,
+    onStandardizationChange,
     onAddressSearchClear: onClear,
     onAddressSearchNext: onNext,
     addressSearchKeyword: searchKeyword,
-    addressSearchList: addressList,
+    addressSearchList: displayList,
     addressSearchStep: step,
     selectedAddress,
     addressSearchOnValueChange: onSelectChange,
@@ -1659,7 +1799,7 @@ function useSearchAddress({ setValue, onClose, isOpen }) {
   };
 }
 const useAddressComponent = () => {
-  const [fullAddress, setFullAddress] = React.useState(null);
+  const [fullAddress, setFullAddress] = React.useState();
   const { isOpen, closeModal, openModal } = salesFrontendDesignSystem.useModalState();
   const AddressSearchComponent = () => /* @__PURE__ */ jsxRuntime.jsx(AddressComponent, { isOpen, onClose: closeModal, setValue: setFullAddress });
   return {
@@ -2310,34 +2450,20 @@ const JobSearchModal = ({ onClose }) => {
   ] });
 };
 
-const mockCustomers = [
-  { customerId: "1", customerName: "\uAE40\uD55C\uD654", birthDate: "1999.01.01", genderCode: "\uB0A8\uC131" },
-  {
-    customerId: "2",
-    customerName: "\uAE40\uD55C\uD654\uC0DD\uBA85",
-    birthDate: "1989.01.01",
-    genderCode: "\uC5EC\uC131",
-    baseAddress: "\uC11C\uC6B8\uC2DC \uB9C8\uD3EC\uAD6C"
-  },
-  {
-    customerId: "3",
-    customerName: "\uAE40\uD55C\uD654\uC190\uD574\uBCF4\uD5D8",
-    birthDate: "1999.01.01",
-    genderCode: "\uB0A8\uC131",
-    baseAddress: "\uC11C\uC6B8\uC2DC \uB9C8\uD3EC\uAD6C"
-  }
-];
 const useCustomerSearch = (onSelect) => {
   const { triggerRef, isOpen, setIsOpen, DropDown } = salesFrontendDesignSystem.useDropDown();
   const [searchKeyword, setSearchKeyword] = React.useState("");
   const [searchInput, setSearchInput] = React.useState("");
   const [customerList, setCustomerList] = React.useState([]);
   const [selectedCustomer, setSelectedCustomer] = React.useState(null);
+  const { data } = method.useSearchCustomerListQuery({ customerName: searchKeyword });
   const search = () => {
     if (searchInput.length >= 2) {
       setSearchKeyword(searchInput);
-      const filtered = mockCustomers.filter((c) => c.customerName?.toLowerCase().includes(searchInput.toLowerCase()));
-      setCustomerList(filtered);
+      const filtered = data?.data?.custList?.filter(
+        (c) => c.customerName?.toLowerCase().includes(searchInput.toLowerCase())
+      );
+      setCustomerList(filtered || []);
       setIsOpen(true);
     } else {
       setCustomerList([]);