sales-frontend-components 0.0.106 → 0.0.107

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { CheckboxButtonProps, CheckboxProps, DatePickerSingleHtmlProps, DatePick
 import * as React$1 from 'react';
 import React__default from 'react';
 import * as sales_frontend_api_method from 'sales-frontend-api/method';
-import { AddressStandardizationResponseDto, AddressResponseDto, CodeDto, CustomerSearchProps, NationalityResponseDto, VisaStatusResponseDto, PersonalCustomerProfileResponseDto, EmployeeProfileResponseDto, OccupationResponseDto, OrganizationProfileResponse, RemoteIdentityVerificationSystemTokenRequestDto, ApiConfig } from 'sales-frontend-api/method';
+import { AddressStandardizationResponseDto, AddressResponseDto, CodeDto, CustomerSearchProps, CustomerDto, NationalityResponseDto, VisaStatusResponseDto, PersonalCustomerProfileResponseDto, EmployeeProfileResponseDto, OccupationResponseDto, OrganizationProfileResponse, RemoteIdentityVerificationSystemTokenRequestDto, ApiConfig } from 'sales-frontend-api/method';
 
 declare const FormCheckboxButton: <TFormValues extends FieldValues>({ name, control, disabled, children, ...props }: Pick<UseControllerProps<TFormValues>, "name" | "control" | "disabled"> & Omit<CheckboxButtonProps, "id">) => react_jsx_runtime.JSX.Element;
 
@@ -189,12 +189,12 @@ interface AddressStandardization {
     land: AddressStandardizationResponseDto;
 }
 
-interface Props$3 {
+interface Props$4 {
     setValue: (address: AddressComponentProps) => void;
     onClose: () => void;
     isOpen: boolean;
 }
-declare function useSearchAddress({ setValue, onClose, isOpen }: Props$3): {
+declare function useSearchAddress({ setValue, onClose, isOpen }: Props$4): {
     selectedStandardizationAddress: AddressStandardization | undefined;
     onStandardizationChange: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
     onAddressSearchClear: () => void;
@@ -238,6 +238,13 @@ declare function useBankStockSearch({ onSelect }: {
 
 declare const CustomerSearch: ({ onSelect }: CustomerSearchProps) => react_jsx_runtime.JSX.Element;
 
+interface Props$3 {
+    isOpen: boolean;
+    closeModal: () => void;
+    onSelect?: (customer: CustomerDto) => void;
+}
+declare function CustomerSearchModal({ isOpen, closeModal, onSelect }: Props$3): react_jsx_runtime.JSX.Element;
+
 interface Props$2 {
     setValue: (nationality: NationalityResponseDto) => void;
     onClose: () => void;
@@ -506,5 +513,5 @@ declare const useRemoteIdentityVerificationPopup: (config: UseRemoteIdentityVeri
     isCreatingUrl: boolean;
 };
 
-export { Attachment, BankStockSearchModal, CODES, CustomerSearch, DeaCustomerSearchModal, EmployeeSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobVehicleSearchModal, OrganizationSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobSearchModal, useJobVehicleSearchModal, useNationalityComponent, useNxlOneModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useRemoteIdentityVerificationPopup, useSearchAddress, useSearchNationality, useSearchVisa, useVisaComponent };
+export { Attachment, BankStockSearchModal, CODES, CustomerSearch, CustomerSearchModal, DeaCustomerSearchModal, EmployeeSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobVehicleSearchModal, OrganizationSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobSearchModal, useJobVehicleSearchModal, useNationalityComponent, useNxlOneModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useRemoteIdentityVerificationPopup, useSearchAddress, useSearchNationality, useSearchVisa, useVisaComponent };
 export type { AttachedPhoto, AttachmentProps, BankStockSearchModalProps, CodeSet, DownloadProps, FormSegmentGroupProps, NxlOneProps, NxlOneResponse, PaintProps, Pen, RemoteIdentityVerificationSuccess, RivUrlParams, Step, StepIndicatorProps, StepItem, UseRemoteIdentityVerificationProps, VerificationResponse, cameraItemType, cameraOptions };

package/dist/index.esm.js

@@ -234,12 +234,12 @@ const highlightOnSearchKeyword$1 = (originalText, targetString) => {
   return originalText;
 };
 
-const cx$j = classNames.bind(styles);
-const { InputBox: InputBox$3, Input: Input$3 } = FormCore;
+const cx$k = classNames.bind(styles);
+const { InputBox: InputBox$4, Input: Input$4 } = FormCore;
 const AddressSearchInitialText = () => {
-  return /* @__PURE__ */ jsxs("div", { className: cx$j("search-result-list"), children: [
-    /* @__PURE__ */ jsx("p", { className: cx$j("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
-    /* @__PURE__ */ jsxs("ul", { className: cx$j("guide"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$k("search-result-list"), children: [
+    /* @__PURE__ */ jsx("p", { className: cx$k("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
+    /* @__PURE__ */ jsxs("ul", { className: cx$k("guide"), children: [
       /* @__PURE__ */ jsx("li", { children: "\uB3C4\uB85C\uBA85/\uC9C0\uBA85\uACFC \uAC74\uBB3C\uBC88\uD638\uB97C \uD568\uAED8 \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
       /* @__PURE__ */ jsx("li", { children: "\uC608) 63\uB85C 50, \uC5EC\uC758\uB3C4\uB3D9 60" }),
       /* @__PURE__ */ jsx("li", { children: "\uC9C0\uBA85\uC740 \uB3D9/\uC74D/\uBA74/\uB9AC\uB85C \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
@@ -255,8 +255,8 @@ const AddressSearchResult = ({
   searchKeyword,
   selectedAddress
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: cx$j("search-result-list"), children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$j("guide-title"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$k("search-result-list"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$k("guide-title"), children: [
       "\uCD1D ",
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: addressSearchList.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
@@ -268,15 +268,15 @@ const AddressSearchResult = ({
           return {
             value: JSON.stringify(item),
             select: item.roadNameBaseAddress === selectedAddress?.roadNameBaseAddress && item.roadNameDetailAddress === selectedAddress?.roadNameDetailAddress && item.mainBuildingName === selectedAddress?.mainBuildingName,
-            label: /* @__PURE__ */ jsxs("div", { className: cx$j("search-result"), children: [
-              /* @__PURE__ */ jsx("div", { className: cx$j("zipcode"), children: highlightOnSearchKeyword$1(`${item.firstPostalCode}${item.secondPostalCode}`, searchKeyword) }),
-              /* @__PURE__ */ jsx("div", { className: cx$j("divider") }),
-              /* @__PURE__ */ jsxs("div", { className: cx$j("address-info"), children: [
-                /* @__PURE__ */ jsx("span", { className: cx$j("address"), children: highlightOnSearchKeyword$1(
+            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("divider") }),
+              /* @__PURE__ */ jsxs("div", { className: cx$k("address-info"), children: [
+                /* @__PURE__ */ jsx("span", { className: cx$k("address"), children: highlightOnSearchKeyword$1(
                   `${item.roadNameBaseAddress} ${item.roadNameDetailAddress} ${item.mainBuildingName}`,
                   searchKeyword
                 ) }),
-                /* @__PURE__ */ jsx("span", { className: cx$j("old-address"), children: highlightOnSearchKeyword$1(
+                /* @__PURE__ */ jsx("span", { className: cx$k("old-address"), children: highlightOnSearchKeyword$1(
                   `${item.landNumberBaseAddress} ${item.landNumberDetailAddress}`,
                   searchKeyword
                 ) })
@@ -285,7 +285,7 @@ const AddressSearchResult = ({
             id: JSON.stringify(item)
           };
         }),
-        className: cx$j("radio-group"),
+        className: cx$k("radio-group"),
         name: "address-search",
         size: "medium",
         defaultValue: "",
@@ -307,7 +307,7 @@ const AddressSearchDetailInput = ({
   detailAddressInput
 }) => {
   const { land, road } = selectedStandardizationAddress;
-  return /* @__PURE__ */ jsxs("div", { className: cx$j("search-result-list"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$k("search-result-list"), children: [
     /* @__PURE__ */ jsx(
       Radio.Root,
       {
@@ -317,21 +317,21 @@ const AddressSearchDetailInput = ({
         children: /* @__PURE__ */ jsx(
           Radio.Item,
           {
-            className: cx$j("radio-group"),
+            className: cx$k("radio-group"),
             value: JSON.stringify(selectedStandardizationAddress),
             onChange: onStandardizationChange,
-            children: /* @__PURE__ */ jsxs("div", { className: cx$j("search-result"), children: [
+            children: /* @__PURE__ */ jsxs("div", { className: cx$k("search-result"), children: [
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cx$j("zipcode"),
+                  className: cx$k("zipcode"),
                   children: `${selectedStandardizationAddress.land?.firstPostalCode}${land?.secondPostalCode}`
                 }
               ),
-              /* @__PURE__ */ jsx("div", { className: cx$j("divider") }),
-              /* @__PURE__ */ jsxs("div", { className: cx$j("address-info"), children: [
-                /* @__PURE__ */ jsx("span", { className: cx$j("address"), children: `${road?.baseAddress} ${road?.detailAddress}` }),
-                /* @__PURE__ */ jsx("span", { className: cx$j("old-address"), children: `${land?.baseAddress} ${land?.detailAddress}` })
+              /* @__PURE__ */ jsx("div", { className: cx$k("divider") }),
+              /* @__PURE__ */ jsxs("div", { className: cx$k("address-info"), children: [
+                /* @__PURE__ */ jsx("span", { className: cx$k("address"), children: `${road?.baseAddress} ${road?.detailAddress}` }),
+                /* @__PURE__ */ jsx("span", { className: cx$k("old-address"), children: `${land?.baseAddress} ${land?.detailAddress}` })
               ] })
             ] })
           }
@@ -388,8 +388,8 @@ function AddressComponent({ isOpen, onClose, setValue }) {
     /* @__PURE__ */ jsxs(Modal.Content, { children: [
       /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uC8FC\uC18C \uAC80\uC0C9", showCloseButton: true }),
       /* @__PURE__ */ jsxs(Modal.Body, { children: [
-        /* @__PURE__ */ jsx(InputBox$3, { clearable: true, endElement: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: search }), onClear: onAddressSearchClear, children: /* @__PURE__ */ jsx(
-          Input$3,
+        /* @__PURE__ */ jsx(InputBox$4, { clearable: true, endElement: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: search }), onClear: onAddressSearchClear, children: /* @__PURE__ */ jsx(
+          Input$4,
           {
             ...addressSearchStep !== "detail-input" && { autoFocus: true },
             onChange: onSearch,
@@ -1061,7 +1061,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;
@@ -1078,7 +1078,7 @@ const highlightOnSearchKeyword = (originalText, targetString) => {
   }
   return replacedText;
 };
-const { InputBox: InputBox$2, Input: Input$2 } = FormCore;
+const { InputBox: InputBox$3, Input: Input$3 } = FormCore;
 const CustomerSearch = ({ onSelect }) => {
   const {
     triggerRef,
@@ -1093,9 +1093,9 @@ const CustomerSearch = ({ onSelect }) => {
     onClear,
     handleSelectItem
   } = useCustomerSearch(onSelect);
-  return /* @__PURE__ */ jsxs("div", { className: cx$i("container"), children: [
-    /* @__PURE__ */ jsx("div", { className: cx$i("search-bar"), children: /* @__PURE__ */ jsx(InputBox$2, { endElement: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: search }), onClear, clearable: true, children: /* @__PURE__ */ jsx(
-      Input$2,
+  return /* @__PURE__ */ jsxs("div", { className: cx$j("container"), children: [
+    /* @__PURE__ */ jsx("div", { className: cx$j("search-bar"), children: /* @__PURE__ */ jsx(InputBox$3, { endElement: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: search }), onClear, clearable: true, children: /* @__PURE__ */ jsx(
+      Input$3,
       {
         onChange: onSearchInputChange,
         onKeyUp,
@@ -1105,14 +1105,14 @@ const CustomerSearch = ({ onSelect }) => {
         ref: triggerRef
       }
     ) }) }),
-    isOpen && customerList.length > 0 && /* @__PURE__ */ jsx(DropDown, { children: /* @__PURE__ */ jsx("div", { className: cx$i("result-container"), children: /* @__PURE__ */ jsx(List, { children: customerList.map((customer) => /* @__PURE__ */ jsx(ListItem, { onClick: () => handleSelectItem(customer), selectable: true, children: /* @__PURE__ */ jsxs("div", { className: cx$i("customer-item"), children: [
-      /* @__PURE__ */ jsx("div", { className: cx$i("name"), children: highlightOnSearchKeyword(customer.customerName || "", searchKeyword) }),
-      /* @__PURE__ */ jsxs("div", { className: cx$i("details"), children: [
+    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$i("separator"), children: "|" }),
+        /* @__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$i("separator"), children: "|" }),
+          /* @__PURE__ */ jsx("span", { className: cx$j("separator"), children: "|" }),
           /* @__PURE__ */ jsx("span", { children: customer.baseAddress })
         ] })
       ] })
@@ -1120,6 +1120,80 @@ const CustomerSearch = ({ onSelect }) => {
   ] });
 };
 
+const cx$i = classNames.bind(styles$2);
+const { InputBox: InputBox$2, Input: Input$2 } = FormCore;
+function CustomerSearchModal({ isOpen, closeModal, onSelect }) {
+  const {
+    triggerRef,
+    searchInput,
+    customerList,
+    searchKeyword,
+    onSearchInputChange,
+    setSearchKeyword,
+    setSearchInput,
+    setCustomerList,
+    onKeyUp,
+    search,
+    onClear,
+    handleSelectItem
+  } = useCustomerSearch(onSelect);
+  return /* @__PURE__ */ jsxs(Modal.Root, { isOpen, onClose: closeModal, modalSize: "full-screen", children: [
+    /* @__PURE__ */ jsx(Modal.Overlay, {}),
+    /* @__PURE__ */ jsxs(Modal.Content, { children: [
+      /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uACE0\uAC1D \uAC80\uC0C9", showCloseButton: true }),
+      /* @__PURE__ */ jsxs(Modal.Body, { children: [
+        /* @__PURE__ */ jsx(InputBox$2, { endElement: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: search }), onClear, clearable: true, children: /* @__PURE__ */ 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__ */ jsxs("p", { className: cx$i("result-count"), children: [
+          "\uCD1D ",
+          /* @__PURE__ */ jsx("span", { className: "text-primary", children: customerList.length }),
+          "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
+        ] }),
+        searchKeyword && customerList.length === 0 && /* @__PURE__ */ jsxs("div", { className: cx$i("search-result"), children: [
+          "`",
+          /* @__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(
+          ListItem,
+          {
+            onClick: () => {
+              handleSelectItem(customer);
+              setSearchKeyword("");
+              setSearchInput("");
+              setCustomerList([]);
+              closeModal();
+            },
+            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__ */ jsxs("div", { className: cx$i("details", "modal"), children: [
+                /* @__PURE__ */ jsx("span", { children: customer.birthDate }),
+                /* @__PURE__ */ jsx("span", { className: cx$i("separator"), children: "|" }),
+                /* @__PURE__ */ jsx("span", { children: customer.genderCode }),
+                customer.baseAddress && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { className: cx$i("separator"), children: "|" }),
+                  /* @__PURE__ */ jsx("span", { children: customer.baseAddress })
+                ] })
+              ] })
+            ] })
+          },
+          customer.customerId
+        )) }) })
+      ] })
+    ] })
+  ] });
+}
+
 const cx$h = classNames.bind(styles$3);
 const { InputBox: InputBox$1, Input: Input$1 } = FormCore;
 const favoriteList = [
@@ -3977,5 +4051,5 @@ const useRemoteIdentityVerificationPopup = (config) => {
   };
 };
 
-export { Attachment, BankStockSearchModal, CODES, CustomerSearch, DeaCustomerSearchModal, EmployeeSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobVehicleSearchModal, OrganizationSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobSearchModal, useJobVehicleSearchModal, useNationalityComponent, useNxlOneModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useRemoteIdentityVerificationPopup, useSearchAddress, useSearchNationality, useSearchVisa, useVisaComponent };
+export { Attachment, BankStockSearchModal, CODES, CustomerSearch, CustomerSearchModal, DeaCustomerSearchModal, EmployeeSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobVehicleSearchModal, OrganizationSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobSearchModal, useJobVehicleSearchModal, useNationalityComponent, useNxlOneModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useRemoteIdentityVerificationPopup, useSearchAddress, useSearchNationality, useSearchVisa, useVisaComponent };
 //# sourceMappingURL=index.esm.js.map