sales-frontend-components 0.0.81 → 0.0.82

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FieldValues, UseControllerProps } from 'react-hook-form';
 import { CheckboxButtonProps, CheckboxProps, DatePickerSingleHtmlProps, DatePickerRangeHtmlProps, FormField, SegmentGroupHtmlProps, SelectProps, OptionProps } from 'sales-frontend-design-system';
 import * as sales_frontend_api_method from 'sales-frontend-api/method';
-import { OccupationResponseDto, AddressStandardizationResponseDto, AddressResponseDto, OrganizationProfileResponse, EmployeeProfileResponseDto, CustomerSearchProps } from 'sales-frontend-api/method';
+import { OccupationResponseDto, AddressStandardizationResponseDto, AddressResponseDto, OrganizationProfileResponse, EmployeeProfileResponseDto, CustomerSearchProps, RemoteIdentityVerificationSystemTokenRequestDto, ApiConfig } from 'sales-frontend-api/method';
 import * as React$1 from 'react';
 import React__default from 'react';
 
@@ -266,5 +266,78 @@ declare const JobSearchModal: React__default.FC<JobSearchModalProps>;
 
 declare const CustomerSearch: ({ onSelect }: CustomerSearchProps) => react_jsx_runtime.JSX.Element;
 
-export { Attachment, BankStockSearchModal, CustomerSearch, EmployeeSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobSearchModal, OrganizationSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobVehicleSearchModal, useSearchAddress };
-export type { AttachedPhoto, AttachmentProps, BankStockItem, BankStockSearchModalProps, DownloadProps, PaintProps, Pen, StepIndicatorProps, StepItem, cameraItemType, cameraOptions };
+interface VerificationResponse {
+    command: 'webClose';
+    args: {
+        result: 'Y' | 'N';
+        code: string;
+    };
+}
+interface RivUrlParams {
+    /** 유입환경구분코드(0: 모바일웹, 1: PC, 2: App) */
+    envDvsnCode?: string;
+    /** 완료페이지 스킵여부(0: Skip Off, 1: Skip On) */
+    skipFinalPage?: string;
+    /** 시작페이지 스킵여부(0: Skip Off, 1: Skip On) */
+    skipFirstPage?: string;
+    /** 국적타입(D: 내국인, F: 외국인) */
+    nationalityType?: 'D' | 'F';
+}
+interface RemoteIdentityVerificationSuccess {
+    rivsRqstId: string;
+}
+interface UseRemoteIdentityVerificationProps {
+    rivEnv?: 'prd' | 'stg' | 'dev';
+    rivOrigin?: string;
+    tokenRequestParams: RemoteIdentityVerificationSystemTokenRequestDto;
+    rivSearchParams?: RivUrlParams;
+    apiConfig?: ApiConfig;
+    onSuccess?: (result: VerificationResponse['args'], remoteIdentityVerificationSuccess: RemoteIdentityVerificationSuccess) => void;
+    onError?: (result: VerificationResponse['args']) => void;
+    onCancel?: (result: VerificationResponse['args']) => void;
+}
+
+/**
+ * 비대면인증시스템 기본 로직
+ * @param config
+ */
+declare const useRemoteIdentityVerification: ({ rivEnv, rivOrigin, tokenRequestParams, apiConfig, onCancel, onError, onSuccess, rivSearchParams }: UseRemoteIdentityVerificationProps) => {
+    createRemoteIdentityVerificationUrl: () => Promise<{
+        fullUrl: string;
+        rivsRqstId: string;
+    }>;
+    createMessageHandler: ({ rivsRqstId }: RemoteIdentityVerificationSuccess, cleanup?: () => void) => (event: MessageEvent) => void;
+};
+/**
+ * Iframe용 비대면인증시스템 훅
+ * @param config
+ * @returns
+ */
+declare const useRemoteIdentityVerificationIframe: (config: UseRemoteIdentityVerificationProps) => {
+    RivModalIframe: ({ width, height, loadingComponent, ...iframeProps }: React.IframeHTMLAttributes<HTMLIFrameElement> & {
+        width?: string;
+        height?: string;
+        loadingComponent?: React.ReactNode;
+    }) => react_jsx_runtime.JSX.Element;
+    RivIframe: ({ width, height, ...iframeProps }: React.IframeHTMLAttributes<HTMLIFrameElement> & {
+        width?: string;
+        height?: string;
+    }) => react_jsx_runtime.JSX.Element | null;
+    openRivIframe: () => Promise<void>;
+    closeRivIframe: () => void;
+    remoteIdentityVerificationUrl: string;
+    isCreatingUrl: boolean;
+    isFullyLoaded: boolean;
+};
+/**
+ * 팝업용 비대면인증시스템 훅
+ * @param config
+ * @returns
+ */
+declare const useRemoteIdentityVerificationPopup: (config: UseRemoteIdentityVerificationProps) => {
+    openPopup: (target?: string, features?: string) => Promise<void>;
+    isCreatingUrl: boolean;
+};
+
+export { Attachment, BankStockSearchModal, CustomerSearch, EmployeeSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobSearchModal, OrganizationSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobVehicleSearchModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useRemoteIdentityVerificationPopup, useSearchAddress };
+export type { AttachedPhoto, AttachmentProps, BankStockItem, BankStockSearchModalProps, DownloadProps, PaintProps, Pen, RemoteIdentityVerificationSuccess, RivUrlParams, StepIndicatorProps, StepItem, UseRemoteIdentityVerificationProps, VerificationResponse, cameraItemType, cameraOptions };

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useController } from 'react-hook-form';
-import { CheckboxButton, Checkbox, DatePicker, DateRangePicker, Accordion, Radio, Table, Button, FormField, Select, Tab, useModalState, Modal, SegmentGroup, ModalUtils, FormCore, RadioGroup, useDropDown, List, ListItem } from 'sales-frontend-design-system';
+import { CheckboxButton, Checkbox, DatePicker, DateRangePicker, Accordion, Radio, Table, Button, FormField, Select, Tab, useModalState, Modal, SegmentGroup, ModalUtils, FormCore, RadioGroup, useDropDown, List, ListItem, Loading } from 'sales-frontend-design-system';
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { useSearchOccupationDetailQuery, useSearchOccupationQuery, useSearchAddressQuery, useSearchPostalCodeQuery, useSearchAddressStandardizationQuery, useSearchOrganizationQuery, useSearchEmployeeProfileQuery, useSearchVehicleQuery, useSearchCustomerListQuery } from 'sales-frontend-api/method';
+import { useSearchOccupationDetailQuery, useSearchOccupationQuery, useSearchAddressQuery, useSearchPostalCodeQuery, useSearchAddressStandardizationQuery, useSearchOrganizationQuery, useSearchEmployeeProfileQuery, useSearchVehicleQuery, useSearchCustomerListQuery, getRemoteIdentityVerificationSystemToken } from 'sales-frontend-api/method';
 import { IconMainUiSearch, IconIllustCamera, IconGraphicsBankHsbc, IconGraphicsBankKebHana, IconGraphicsBankScJeil, IconGraphicsBankGyeongnam, IconGraphicsBankGwangju, IconGraphicsBankKukmin, IconGraphicsBankKiup, IconGraphicsBankJiyeokNonghyeop, IconGraphicsBankNhNonghyeop, IconGraphicsBankDaegu, IconGraphicsBankBusan, IconGraphicsBankSanlim, IconGraphicsBankSaneop, IconGraphicsBankSaemaulGeumgo, IconGraphicsBankSuhyeop, IconGraphicsBankSinhan, IconGraphicsBankSinhyeop, IconGraphicsBankOehwan, IconGraphicsBankWoori, IconGraphicsBankPost, IconGraphicsBankJeochuk, IconGraphicsBankJeonbuk, IconGraphicsBankJeju, IconGraphicsBankKakaoBank, IconGraphicsBankKBank, IconGraphicsBankHankookCity, IconGraphicsStockDbGeumyungTujajeungkwon, IconGraphicsStockKbJeungkwon, IconGraphicsStockNhWooriTujajeungkwon, IconGraphicsStockNhTujajeungkwon, IconGraphicsStockSkJeungkwon, IconGraphicsStockGyoboJeungkwon, IconGraphicsStockDaesinJeungkwon, IconGraphicsStockMeritzJeungkwon, IconGraphicsStockMiraeAssetJeungkwon, IconGraphicsStockBugukJeungkwon, IconGraphicsStockSamsungJeungkwon, IconGraphicsStockSinyeongJeungkwon, IconGraphicsStockSinhanTujajeungkwon, IconGraphicsStockYuantaJeungkwon, IconGraphicsStockYujinTujajeungkwon, IconGraphicsStockKiwoomJeungkwon, IconGraphicsStockHanaGeumyungTujajeungkwon, IconGraphicsStockHiTujajeungkwon, IconGraphicsStockHankookJeungkwonGeumyung, IconGraphicsStockHankookTujajeungkwon, IconGraphicsStockHanwhaTujajeungkwon, IconGraphicsStockHyundaiChaJeungkwon, IconGraphicsStockHochulEopsum, IconGraphicsFeedbackEmpty, IconIllustGrade, IconIllustJob, IconSubUiArrowRight, IconIllustVehicle } from 'sales-frontend-assets';
 import styles from './modal/pre-standard/job-search-modal/job-search-modal.module.scss';
 import styles$1 from './step-indicator/step-indicator.module.scss';
@@ -14,6 +14,7 @@ import styles$6 from './modal/pre-standard/employee-search-modal/employee-search
 import styles$7 from './modal/pre-standard/job-vehicle-search-modal/job-vehicle-search-modal.module.scss';
 import styles$8 from './modal/pre-standard/vehicle-search-modal/vehicle-search-modal.module.scss';
 import styles$9 from './modal/standard/customer-search/customer-search.module.scss';
+import { MessageEventManager } from 'sales-frontend-utils';
 
 const FormCheckboxButton = ({
   name,
@@ -2577,5 +2578,203 @@ const CustomerSearch = ({ onSelect }) => {
   ] });
 };
 
-export { Attachment, BankStockSearchModal, CustomerSearch, EmployeeSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobSearchModal, OrganizationSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobVehicleSearchModal, useSearchAddress };
+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 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 } = useModalState();
+  const [remoteIdentityVerificationUrl, setRemoteIdentityVerificationUrl] = useState("");
+  const [rivsRqstId, setRivsRqstId] = useState("");
+  const [isCreatingUrl, setIsCreatingUrl] = useState(false);
+  const [isIframeLoaded, setIsIframeLoaded] = 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 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();
+  };
+  useEffect(() => {
+    if (!remoteIdentityVerificationUrl) {
+      return;
+    }
+    const messageHandler = createMessageHandler({ rivsRqstId }, closeRivIframe);
+    MessageEventManager.getInstance().registerHandler("riv-iframe-handler", messageHandler);
+    return () => MessageEventManager.getInstance().unregisterHandler("riv-iframe-handler");
+  }, [remoteIdentityVerificationUrl, rivsRqstId]);
+  const RivIframe = ({
+    width = "100%",
+    height = "100%",
+    ...iframeProps
+  }) => {
+    if (!remoteIdentityVerificationUrl) {
+      return null;
+    }
+    return /* @__PURE__ */ 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__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Modal.Root, { isOpen, children: [
+      isLoading && (loadingComponent || /* @__PURE__ */ jsx(Loading.Wait, { bodyText: "\uBD88\uB7EC\uC624\uB294 \uC911" })),
+      /* @__PURE__ */ 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] = useState(false);
+  const [rivsRqstId, setRivsRqstId] = useState("");
+  const popupRef = 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 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 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;
+  };
+  useEffect(() => {
+    const messageHandler = createMessageHandler({ rivsRqstId }, cleanPopup);
+    MessageEventManager.getInstance().registerHandler("riv-popup-handler", messageHandler);
+    return () => MessageEventManager.getInstance().unregisterHandler("riv-popup-handler");
+  }, [rivsRqstId]);
+  return {
+    openPopup,
+    isCreatingUrl
+  };
+};
+
+export { Attachment, BankStockSearchModal, CustomerSearch, EmployeeSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobSearchModal, OrganizationSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobVehicleSearchModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useRemoteIdentityVerificationPopup, useSearchAddress };
 //# sourceMappingURL=index.esm.js.map