sales-frontend-components 0.0.80 → 0.0.82

package/dist/index.cjs.js

@@ -16,6 +16,7 @@ var styles$6 = require('./modal/pre-standard/employee-search-modal/employee-sear
 var styles$7 = require('./modal/pre-standard/job-vehicle-search-modal/job-vehicle-search-modal.module.scss');
 var styles$8 = require('./modal/pre-standard/vehicle-search-modal/vehicle-search-modal.module.scss');
 var styles$9 = require('./modal/standard/customer-search/customer-search.module.scss');
+var salesFrontendUtils = require('sales-frontend-utils');
 
 const FormCheckboxButton = ({
   name,
@@ -283,6 +284,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 +376,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 +415,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
@@ -2386,34 +2451,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([]);
@@ -2529,6 +2580,204 @@ const CustomerSearch = ({ onSelect }) => {
   ] });
 };
 
+const VERIFICATION_CODES = {
+  SUCCESS: "0000",
+  USER_CANCEL: "9000",
+  TOKEN_ERROR: "9001",
+  CAMERA_PERMISSION: "9002",
+  ATTEMPT_EXCEEDED: "9003",
+  SERVER_ERROR: "9999"
+};
+const useRemoteIdentityVerification = ({
+  rivEnv,
+  rivOrigin,
+  tokenRequestParams,
+  apiConfig,
+  onCancel,
+  onError,
+  onSuccess,
+  rivSearchParams
+}) => {
+  const rivHost = rivOrigin ?? `https://${rivEnv === "prd" ? "" : rivEnv === "stg" ? "qa" : "dev"}riv.hanwhalife.com`;
+  const createRemoteIdentityVerificationUrl = async () => {
+    const response = await method.getRemoteIdentityVerificationSystemToken(tokenRequestParams, apiConfig);
+    const { accessToken, remoteIdentityVerificationSystemRequestId } = response.data;
+    const urlParams = new URLSearchParams({
+      authorization: accessToken,
+      rivsRqstId: remoteIdentityVerificationSystemRequestId,
+      ...rivSearchParams
+    });
+    return { fullUrl: `${rivHost}/?${urlParams.toString()}`, rivsRqstId: remoteIdentityVerificationSystemRequestId };
+  };
+  const createMessageHandler = ({ rivsRqstId }, cleanup) => {
+    return (event) => {
+      try {
+        const response = typeof event.data === "string" ? JSON.parse(decodeURIComponent(event.data)) : event.data;
+        if (response.command !== "webClose") {
+          return;
+        }
+        const { result, code } = response.args;
+        switch (code) {
+          case VERIFICATION_CODES.USER_CANCEL:
+            console.log("=====\uC0AC\uC6A9\uC790 \uC885\uB8CC!=====", { result, code });
+            onCancel?.({ result, code });
+            cleanup?.();
+            break;
+          case VERIFICATION_CODES.TOKEN_ERROR:
+          case VERIFICATION_CODES.CAMERA_PERMISSION:
+          case VERIFICATION_CODES.ATTEMPT_EXCEEDED:
+          case VERIFICATION_CODES.SERVER_ERROR:
+            console.log("=====\uBE44\uB300\uBA74\uC778\uC99D \uC2E4\uD328!=====", { result, code });
+            onError?.({ result, code });
+            cleanup?.();
+            break;
+          case VERIFICATION_CODES.SUCCESS:
+            console.log("=====\uBE44\uB300\uBA74\uC778\uC99D \uC131\uACF5!=====", { result, code });
+            onSuccess?.({ result, code }, { rivsRqstId });
+            cleanup?.();
+            break;
+          default:
+            console.warn("Unknown verification code:", code);
+        }
+      } catch (error) {
+        console.error("Failed to parse postMessage:", error);
+      }
+    };
+  };
+  return {
+    createRemoteIdentityVerificationUrl,
+    createMessageHandler
+  };
+};
+const useRemoteIdentityVerificationIframe = (config) => {
+  const { createMessageHandler, createRemoteIdentityVerificationUrl } = useRemoteIdentityVerification(config);
+  const { isOpen, openModal, closeModal } = salesFrontendDesignSystem.useModalState();
+  const [remoteIdentityVerificationUrl, setRemoteIdentityVerificationUrl] = React.useState("");
+  const [rivsRqstId, setRivsRqstId] = React.useState("");
+  const [isCreatingUrl, setIsCreatingUrl] = React.useState(false);
+  const [isIframeLoaded, setIsIframeLoaded] = React.useState(false);
+  const createIframeUrl = async () => {
+    if (remoteIdentityVerificationUrl || isCreatingUrl) {
+      return;
+    }
+    setIsCreatingUrl(true);
+    setIsIframeLoaded(false);
+    try {
+      const { fullUrl, rivsRqstId: rivsRqstId2 } = await createRemoteIdentityVerificationUrl();
+      setRemoteIdentityVerificationUrl(fullUrl);
+      setRivsRqstId(rivsRqstId2);
+    } catch (error) {
+      console.error("Failed to create URL:", error);
+      throw error;
+    } finally {
+      setIsCreatingUrl(false);
+    }
+  };
+  const openRivIframe = async () => {
+    try {
+      await createIframeUrl();
+      openModal();
+    } catch (error) {
+      console.error("openRivIframe error::", error);
+      await salesFrontendDesignSystem.ModalUtils.alert("\uBE44\uB300\uBA74 \uC778\uC99D URL \uC0DD\uC131\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uC2DC\uB3C4\uD574\uC8FC\uC138\uC694.");
+    }
+  };
+  const closeRivIframe = () => {
+    setRemoteIdentityVerificationUrl("");
+    setRivsRqstId("");
+    setIsIframeLoaded(false);
+    closeModal();
+  };
+  React.useEffect(() => {
+    if (!remoteIdentityVerificationUrl) {
+      return;
+    }
+    const messageHandler = createMessageHandler({ rivsRqstId }, closeRivIframe);
+    salesFrontendUtils.MessageEventManager.getInstance().registerHandler("riv-iframe-handler", messageHandler);
+    return () => salesFrontendUtils.MessageEventManager.getInstance().unregisterHandler("riv-iframe-handler");
+  }, [remoteIdentityVerificationUrl, rivsRqstId]);
+  const RivIframe = ({
+    width = "100%",
+    height = "100%",
+    ...iframeProps
+  }) => {
+    if (!remoteIdentityVerificationUrl) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "iframe",
+      {
+        src: remoteIdentityVerificationUrl,
+        width,
+        height,
+        allow: "camera *;",
+        onLoad: () => setIsIframeLoaded(true),
+        ...iframeProps
+      }
+    );
+  };
+  const RivModalIframe = ({
+    width = "100%",
+    height = "100%",
+    loadingComponent,
+    ...iframeProps
+  }) => {
+    const isLoading = isCreatingUrl || !!remoteIdentityVerificationUrl && !isIframeLoaded;
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen, children: [
+      isLoading && (loadingComponent || /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Loading.Wait, { bodyText: "\uBD88\uB7EC\uC624\uB294 \uC911" })),
+      /* @__PURE__ */ jsxRuntime.jsx(RivIframe, { width, height, allow: "camera *;", ...iframeProps })
+    ] }) });
+  };
+  return {
+    RivModalIframe,
+    RivIframe,
+    openRivIframe,
+    closeRivIframe,
+    remoteIdentityVerificationUrl,
+    isCreatingUrl,
+    isFullyLoaded: isIframeLoaded
+  };
+};
+const useRemoteIdentityVerificationPopup = (config) => {
+  const { createRemoteIdentityVerificationUrl, createMessageHandler } = useRemoteIdentityVerification(config);
+  const [isCreatingUrl, setIsCreatingUrl] = React.useState(false);
+  const [rivsRqstId, setRivsRqstId] = React.useState("");
+  const popupRef = React.useRef(null);
+  const openPopup = async (target = "_blank", features) => {
+    if (popupRef.current && !popupRef.current.closed) {
+      popupRef.current.close();
+    }
+    setIsCreatingUrl(true);
+    try {
+      const { fullUrl, rivsRqstId: rivsRqstId2 } = await createRemoteIdentityVerificationUrl();
+      const popup = window.open(fullUrl, target, features);
+      if (!popup) {
+        await salesFrontendDesignSystem.ModalUtils.alert("\uD31D\uC5C5\uC774 \uCC28\uB2E8\uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uD31D\uC5C5\uC744 \uD5C8\uC6A9\uD574\uC8FC\uC138\uC694.");
+        return;
+      }
+      setRivsRqstId(rivsRqstId2);
+      popupRef.current = popup;
+    } catch (error) {
+      console.error("openPopup error::", error);
+      await salesFrontendDesignSystem.ModalUtils.alert("\uBE44\uB300\uBA74 \uC778\uC99D URL \uC0DD\uC131\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uC2DC\uB3C4\uD574\uC8FC\uC138\uC694.");
+    } finally {
+      setIsCreatingUrl(false);
+    }
+  };
+  const cleanPopup = () => {
+    popupRef.current = null;
+  };
+  React.useEffect(() => {
+    const messageHandler = createMessageHandler({ rivsRqstId }, cleanPopup);
+    salesFrontendUtils.MessageEventManager.getInstance().registerHandler("riv-popup-handler", messageHandler);
+    return () => salesFrontendUtils.MessageEventManager.getInstance().unregisterHandler("riv-popup-handler");
+  }, [rivsRqstId]);
+  return {
+    openPopup,
+    isCreatingUrl
+  };
+};
+
 exports.Attachment = Attachment;
 exports.BankStockSearchModal = BankStockSearchModal;
 exports.CustomerSearch = CustomerSearch;
@@ -2551,5 +2800,8 @@ exports.useBankStockSearch = useBankStockSearch;
 exports.useCamera = useCamera;
 exports.useCanvasPaint = useCanvasPaint;
 exports.useJobVehicleSearchModal = useJobVehicleSearchModal;
+exports.useRemoteIdentityVerification = useRemoteIdentityVerification;
+exports.useRemoteIdentityVerificationIframe = useRemoteIdentityVerificationIframe;
+exports.useRemoteIdentityVerificationPopup = useRemoteIdentityVerificationPopup;
 exports.useSearchAddress = useSearchAddress;
 //# sourceMappingURL=index.cjs.js.map