@bytexbyte/berifyme-react-sdk 1.0.3 → 1.0.5

package/dist/BerifymeModal/index.js

@@ -34,38 +34,35 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import { environmentDomains } from '../lib/environmentDomains';
-import { PageStatus } from '../enum';
 import { Box, CircularProgress, CssBaseline, ThemeProvider } from '@mui/material';
 import React, { useEffect, useState } from 'react';
-import theme from '../components/theme';
+import '../../index.css';
 import berifymeApi, { initializeBerifymeApi } from '../api/api';
-import { incode } from '../vender/incode/incode';
 import AllSet from '../components/AllSet';
-import Modal from './MainModal';
-import RedirectToMobile from '../components/RedirectToMobile';
-import ScreenRotation from '../components/ScreenRotation';
-import TryAgainInModal from '../components/TryAgainInModal';
 import { createDeveloperLog } from '../components/createDeveloperLog';
 import { AuthidLogin } from '../components/Login/authid';
 import { ClearLogin } from '../components/Login/clear';
 import { ClearLoginAllSet } from '../components/Login/clearAllSet';
 import { IncodeLogin } from '../components/Login/incode';
-//[Wings] import SumsubLogin from './login/sumsub';
-//[Wings] import VeriffLogin from './login/veriff';
 import AuthID from '../components/OnBoarding/authId';
 import IdOrPassport from '../components/OnBoarding/authId/idOrPassport';
 import { ClearOnboarding } from '../components/OnBoarding/clear';
 import { ClearOnboardingAllSet } from '../components/OnBoarding/clear/clearAllSet';
 import { IncodeOnBoarding } from '../components/OnBoarding/incode';
-//[Wings] import SumsubOnBoarding from './onBoarding/sumsub';
 import Vender from '../components/OnBoarding/vender';
-//[Wings] import VeriffOnBoarding from './onBoarding/veriff';
-//[Wings] import YotiOnBoarding from './onBoarding/yoti';
+import RedirectToMobile from '../components/RedirectToMobile';
+import ScreenRotation from '../components/ScreenRotation';
 import SendSns from '../components/SendSns';
+import theme from '../components/theme';
+import TryAgainInModal from '../components/TryAgainInModal';
 import VerifyNewUser from '../components/VerifyWithPhoneNumber/NewUser';
 import VerifyUser from '../components/VerifyWithPhoneNumber/User';
-import '../../index.css';
+import { PageStatus } from '../enum';
+import { environmentDomains } from '../lib/environmentDomains';
+import { incode } from '../vender/incode/incode';
+import Modal from './MainModal';
+import QrcodeExpired from '../components/QrcodeExpired';
+import SessionInterrupted from '../components/SessionInterrupted';
 var HomeModal = function (_a) {
     var apiKeyId = _a.apiKeyId, secretKey = _a.secretKey, redirectUrl = _a.redirectUrl, _b = _a.initialPhoneNumber, initialPhoneNumber = _b === void 0 ? '' : _b, environment = _a.environment, forceQrcode = _a.forceQrcode;
     var _c = useState(window.innerWidth > window.innerHeight), isLandscape = _c[0], setIsLandscape = _c[1];
@@ -156,6 +153,25 @@ var HomeModal = function (_a) {
             });
         });
     }
+    function checkDesktopRedirectUrlIdExpired(_a) {
+        return __awaiter(this, arguments, void 0, function (_b) {
+            var res;
+            var token = _b.token, desktopRedirectUrlId = _b.desktopRedirectUrlId;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0: return [4 /*yield*/, berifymeApi.thirdParty.checkDesktopRedirectUrlIdExpired({ token: token, desktopRedirectUrlId: desktopRedirectUrlId })];
+                    case 1:
+                        res = _c.sent();
+                        console.log('checkDesktopRedirectUrlIdExpired', res.error);
+                        if (res.error)
+                            setPageStatus(PageStatus.QRCodeExpired);
+                        else
+                            setPageStatus(PageStatus.SendSns);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
     useEffect(function () {
         if (incode.isDesktop() || forceQrcode) {
             setUseQrcode(true);
@@ -181,18 +197,24 @@ var HomeModal = function (_a) {
         // } else {
         //   setError('Token is required to access this page. Please include a valid token in the URL.');
         // }
-        //處理desktop
-        if (res.desktopRedirectUrlId)
+        // 若params有desktopRedirectUrlId, 就設定useState
+        if (res.desktopRedirectUrlId) {
             setDesktopRedirectUrlId(res.desktopRedirectUrlId);
+        }
         // 確定是否為clear callback onboarding or login，是就轉導致對應頁面
+        // 然後如果有desktopRedirectUrlId, 檢查有沒有過期, 有就去QrCodeExpired頁面, 沒有就去SendSns
+        // 如果沒有desktopRedirectUrlId就照流程去SendSns
         if (res.callback === 'clear_login') {
             setPageStatus(6);
         }
         else if (res.callback === 'clear_onboarding') {
             setPageStatus(7);
         }
+        else if (res.desktopRedirectUrlId) {
+            checkDesktopRedirectUrlIdExpired({ token: res.token, desktopRedirectUrlId: res.desktopRedirectUrlId });
+        }
         else {
-            setPageStatus(0);
+            setPageStatus(PageStatus.SendSns);
         }
     }, []);
     useEffect(function () {
@@ -221,60 +243,51 @@ var HomeModal = function (_a) {
         else if (isLandscape) {
             setModalHeight('100vh');
         }
-        else if (pageStatus === 0) {
+        else if (pageStatus === PageStatus.SendSns) {
             setModalHeight('58vh');
         }
-        else if (pageStatus === 1) {
+        else if (pageStatus === PageStatus.QRCodeExpired) {
+            setModalHeight('46vh');
+        }
+        else if (pageStatus === PageStatus.VerifyNewUser) {
             setModalHeight('64vh');
         }
-        else if (pageStatus === 2) {
-            setModalHeight('90vh');
+        else if (pageStatus === PageStatus.AuthIdOnboarding) {
+            setModalHeight('100vh');
         }
-        else if (pageStatus === 4) {
+        else if (pageStatus === PageStatus.ClearLogin) {
             setModalHeight('100vh');
         }
-        else if (pageStatus === 5) {
+        else if (pageStatus === PageStatus.IncodeLogin) {
             setModalHeight('100vh');
         }
-        else if (pageStatus === 6) {
+        else if (pageStatus === PageStatus.ClearLoginAllSet) {
             setModalHeight('58vh');
         }
-        else if (pageStatus === 7) {
+        else if (pageStatus === PageStatus.ClearOnboardingAllSet) {
             setModalHeight('58vh');
         }
-        else if (pageStatus === 8) {
+        else if (pageStatus === PageStatus.Vender) {
             setModalHeight('80vh');
         }
-        else if (pageStatus === 9) {
-            setModalHeight('100vh');
-        }
-        else if (pageStatus === 1.1) {
-            setModalHeight('80vh');
-        }
-        else if (pageStatus === 1.2) {
+        else if (pageStatus === PageStatus.IdOrPassport) {
             setModalHeight('55vh');
         }
-        else if (pageStatus === 1.5) {
+        else if (pageStatus === PageStatus.VerifyUser) {
             setModalHeight('46vh');
         }
-        else if (pageStatus === 2.1) {
+        else if (pageStatus === PageStatus.ClearOnboarding) {
             setModalHeight('100vh');
         }
-        else if (pageStatus === 2.2) {
+        else if (pageStatus === PageStatus.IncodeOnBoarding) {
             setModalHeight('100vh');
         }
-        else if (pageStatus === 2.3) {
-            setModalHeight('80vh');
-        }
-        else if (pageStatus === 2.4) {
-            setModalHeight('100vh');
-        }
-        else if (pageStatus === 2.5) {
-            setModalHeight('80vh');
-        }
-        else if (pageStatus === 10) {
+        else if (pageStatus === PageStatus.AllSet) {
             setModalHeight('58vh');
         }
+        else if (pageStatus === PageStatus.SessionInterrupted) {
+            setModalHeight('46vh');
+        }
         else {
             setModalHeight('80vh');
         }
@@ -307,6 +320,10 @@ var HomeModal = function (_a) {
                                             background: '#FFFFFF'
                                         } },
                                         React.createElement(CircularProgress, null)),
+                                pageStatus === PageStatus.SessionInterrupted &&
+                                    React.createElement(SessionInterrupted, null),
+                                pageStatus === PageStatus.QRCodeExpired &&
+                                    React.createElement(QrcodeExpired, null),
                                 pageStatus === PageStatus.SendSns &&
                                     React.createElement(SendSns, { token: token, inputValue: inputValue, setInputValue: setInputValue, setError: setError, setPageStatus: setPageStatus, setProcessedPhoneNumber: setProcessedPhoneNumber, setModalHeight: setModalHeight, setUser: setUser, environment: environment }),
                                 pageStatus === PageStatus.VerifyNewUser &&
@@ -318,22 +335,22 @@ var HomeModal = function (_a) {
                                 pageStatus === PageStatus.VerifyUser &&
                                     React.createElement(VerifyUser, { token: token, inputValue: inputValue, setError: setError, setPageStatus: setPageStatus, setModalHeight: setModalHeight, setUser: setUser, environment: environment }),
                                 pageStatus === PageStatus.AuthIdOnboarding && user &&
-                                    React.createElement(AuthID, { token: token, goToAllSet: function () { return setPageStatus(10); }, setError: setError, userId: user.id, setUser: setUser, selectedIdType: authIdSelectedIdType }),
+                                    React.createElement(AuthID, { token: token, goToAllSet: function () { return setPageStatus(PageStatus.AllSet); }, setError: setError, userId: user.id, setUser: setUser, selectedIdType: authIdSelectedIdType, setSelectedIdType: setAuthIdSelectedIdType, setPageStatus: setPageStatus }),
                                 pageStatus === PageStatus.ClearOnboarding && user &&
                                     React.createElement(ClearOnboarding, { token: token, user: user, desktopRedirectUrlId: desktopRedirectUrlId }),
                                 pageStatus === PageStatus.IncodeOnBoarding && user &&
-                                    React.createElement(IncodeOnBoarding, { user: user, setUser: setUser, token: token, goToAllSet: function () { return setPageStatus(10); } }),
+                                    React.createElement(IncodeOnBoarding, { user: user, setUser: setUser, token: token, goToAllSet: function () { return setPageStatus(PageStatus.AllSet); } }),
                                 pageStatus === PageStatus.AuthidLogin && processedPhoneNumber &&
-                                    React.createElement(AuthidLogin, { token: token, goToAllSet: function () { return setPageStatus(10); }, phoneNumber: processedPhoneNumber, setUser: setUser }),
+                                    React.createElement(AuthidLogin, { token: token, goToAllSet: function () { return setPageStatus(PageStatus.AllSet); }, phoneNumber: processedPhoneNumber, setUser: setUser }),
                                 pageStatus === PageStatus.ClearLogin &&
                                     React.createElement(ClearLogin, { token: token, userId: user === null || user === void 0 ? void 0 : user.id, desktopRedirectUrlId: desktopRedirectUrlId }),
                                 pageStatus === PageStatus.IncodeLogin &&
-                                    React.createElement(IncodeLogin, { token: token, user: user, setUser: setUser, goToAllSet: function () { return setPageStatus(10); } }),
+                                    React.createElement(IncodeLogin, { token: token, user: user, setUser: setUser, goToAllSet: function () { return setPageStatus(PageStatus.AllSet); } }),
                                 pageStatus === PageStatus.ClearLoginAllSet &&
-                                    React.createElement(ClearLoginAllSet, { token: token, desktopRedirectUrlId: desktopRedirectUrlId }),
+                                    React.createElement(ClearLoginAllSet, { token: token, desktopRedirectUrlId: desktopRedirectUrlId, setPageStatus: setPageStatus }),
                                 pageStatus === PageStatus.ClearOnboardingAllSet &&
-                                    React.createElement(ClearOnboardingAllSet, { token: token, desktopRedirectUrlId: desktopRedirectUrlId }),
+                                    React.createElement(ClearOnboardingAllSet, { token: token, desktopRedirectUrlId: desktopRedirectUrlId, setPageStatus: setPageStatus }),
                                 pageStatus === PageStatus.AllSet &&
-                                    React.createElement(AllSet, { user: user, token: token, desktopRedirectUrlId: desktopRedirectUrlId })))))))));
+                                    React.createElement(AllSet, { user: user, token: token, desktopRedirectUrlId: desktopRedirectUrlId, setPageStatus: setPageStatus })))))))));
 };
 export default HomeModal;

package/dist/api/api.js

@@ -558,6 +558,29 @@ function checkThirdPartyVerificationToken(token) {
         });
     });
 }
+function checkDesktopRedirectUrlIdExpired(_a) {
+    return __awaiter(this, arguments, void 0, function (_b) {
+        var url, res;
+        var token = _b.token, desktopRedirectUrlId = _b.desktopRedirectUrlId;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    url = "".concat(config.backendDomain, "/api/thirdParty/checkDesktopRedirectUrlIdExpired?desktopRedirectUrlId=").concat(desktopRedirectUrlId);
+                    console.log('UrlString: ', url);
+                    return [4 /*yield*/, axios.get(url, {
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'token': token,
+                            }
+                        })];
+                case 1:
+                    res = _c.sent();
+                    console.log('UrlRes data: ', res.data);
+                    return [2 /*return*/, res.data];
+            }
+        });
+    });
+}
 function sendVerifyEmail(email) {
     return __awaiter(this, void 0, void 0, function () {
         var url, res;
@@ -1292,6 +1315,7 @@ var berifymeApi = {
     thirdParty: {
         getRedirectUrl: getRedirectUrl,
         checkThirdPartyVerificationToken: checkThirdPartyVerificationToken,
+        checkDesktopRedirectUrlIdExpired: checkDesktopRedirectUrlIdExpired,
     },
     scheduld: {
         initUpdateAdminTokenSchedule: initUpdateAdminTokenSchedule,

package/dist/components/AllSet/index.js

@@ -44,6 +44,7 @@ import { useEffect, useState } from "react";
 import TryAgain from "../TryAgain";
 import { v4 as uuidv4 } from 'uuid';
 import { createDeveloperLog } from "../createDeveloperLog";
+import { PageStatus } from "../../enum";
 var createDeviceId = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
     var newDeviceId;
     var userId = _b.userId;
@@ -62,7 +63,7 @@ var createDeviceId = function (_a) { return __awaiter(void 0, [_a], void 0, func
     });
 }); };
 var AllSet = function (_a) {
-    var user = _a.user, token = _a.token, desktopRedirectUrlId = _a.desktopRedirectUrlId;
+    var user = _a.user, token = _a.token, desktopRedirectUrlId = _a.desktopRedirectUrlId, setPageStatus = _a.setPageStatus;
     var _b = useState(''), error = _b[0], setError = _b[1];
     var _c = useState(), desktopStatusMessage = _c[0], setDesktopStatusMessage = _c[1];
     var _d = useState(true), loading = _d[0], setLoading = _d[1];
@@ -137,11 +138,11 @@ var AllSet = function (_a) {
                     if (desktopRedirectUrlId === undefined) {
                         setRedirectUrl(res.redirectUrl);
                     }
+                    else if (res.heartbeatStopped) {
+                        setPageStatus(PageStatus.SessionInterrupted);
+                    }
                     else {
-                        if (res.heartbeatStopped)
-                            setDesktopStatusMessage('Session interrupted. Please retry.');
-                        else
-                            setDesktopStatusMessage('ID verification successful. Continue on your PC.');
+                        setDesktopStatusMessage('Return to the original window to be redirected to the next page');
                     }
                     return [2 /*return*/];
             }
@@ -161,24 +162,21 @@ var AllSet = function (_a) {
                     background: '#FFFFFF'
                 } },
                 React.createElement(CircularProgress, null)) :
-            React.createElement(React.Fragment, null, desktopStatusMessage ?
-                React.createElement(Stack, { height: 1, justifyContent: "center", alignItems: "center" },
-                    React.createElement(Stack, { alignItems: "center", spacing: 2 },
-                        React.createElement("img", { width: 40, height: 40, src: "https://staging.berify.me/berify.svg", alt: "berify" }),
-                        React.createElement(Typography, { variant: "body1", color: theme.palette.text.secondary }, desktopStatusMessage)))
-                :
-                    React.createElement(Stack, { height: 1, spacing: 4, justifyContent: 'space-between', py: 4, overflow: 'auto' },
-                        React.createElement(Stack, { spacing: 2, textAlign: 'center', alignItems: 'center' },
-                            React.createElement("img", { width: 40, height: 40, src: "https://staging.berify.me/berify.svg", alt: "berify" }),
-                            React.createElement(Typography, { variant: "h2", fontWeight: 700 },
-                                "You\u2019re Berified,",
-                                React.createElement("br", null), user === null || user === void 0 ? void 0 :
-                                user.fullName),
-                            React.createElement(Typography, { variant: "body1", color: theme.palette.text.secondary }, "Thank you for securely verifying your identity through Berify.me \uD83C\uDF89")),
-                        React.createElement(Stack, { spacing: 2, alignItems: 'center' },
-                            React.createElement(Button, { variant: "contained", onClick: function () { window.location.href = redirectUrl; }, sx: { minWidth: 160 } }, "Continue")),
-                        React.createElement(Stack, { direction: 'row', spacing: 2, textAlign: 'center', justifyContent: 'center', color: theme.palette.text.secondary },
-                            React.createElement(GppGoodOutlinedIcon, null),
-                            React.createElement(Typography, { variant: "body1" }, "Securely powered by Berify.me")))))));
+            React.createElement(Stack, { height: 1, spacing: 4, justifyContent: 'space-between', py: 4, overflow: 'auto' },
+                React.createElement(Stack, { spacing: 2, textAlign: 'center', alignItems: 'center' },
+                    React.createElement("img", { width: 40, height: 40, src: "https://staging.berify.me/berify.svg", alt: "berify" }),
+                    React.createElement(Typography, { variant: "h2", fontWeight: 700 },
+                        "You\u2019re Berified,",
+                        React.createElement("br", null), user === null || user === void 0 ? void 0 :
+                        user.fullName),
+                    React.createElement(Typography, { variant: "body1", color: theme.palette.text.secondary }, "Thank you for securely verifying your identity through Berify.me \uD83C\uDF89")),
+                desktopStatusMessage ?
+                    React.createElement(Stack, { py: 4, textAlign: 'center', alignItems: 'center' },
+                        React.createElement(Typography, { variant: "body1", color: theme.palette.text.secondary }, desktopStatusMessage)) :
+                    React.createElement(Stack, { spacing: 2, alignItems: 'center' },
+                        React.createElement(Button, { variant: "contained", onClick: function () { window.location.href = redirectUrl; }, sx: { minWidth: 160 } }, "Continue")),
+                React.createElement(Stack, { direction: 'row', spacing: 2, textAlign: 'center', justifyContent: 'center', color: theme.palette.text.secondary },
+                    React.createElement(GppGoodOutlinedIcon, null),
+                    React.createElement(Typography, { variant: "body1" }, "Securely powered by Berify.me"))))));
 };
 export default AllSet;

package/dist/components/Login/clearAllSet.js

@@ -43,7 +43,7 @@ import TryAgain from "../TryAgain";
 import { updateAuthenticationLog } from "../AuthenticationLogs";
 import { createDeveloperLog } from "../createDeveloperLog";
 var ClearLoginAllSet = function (_a) {
-    var token = _a.token, desktopRedirectUrlId = _a.desktopRedirectUrlId;
+    var token = _a.token, desktopRedirectUrlId = _a.desktopRedirectUrlId, setPageStatus = _a.setPageStatus;
     var _b = useState(), user = _b[0], setUser = _b[1]; // berifyme user
     var _c = useState(), error = _c[0], setError = _c[1];
     var getUserBySessionId = function (sessionId) { return __awaiter(void 0, void 0, void 0, function () {
@@ -83,7 +83,7 @@ var ClearLoginAllSet = function (_a) {
     }, []);
     if (error)
         return (React.createElement(TryAgain, { message: error }));
-    return (React.createElement(React.Fragment, null, user ? React.createElement(AllSet, { user: user, token: token, desktopRedirectUrlId: desktopRedirectUrlId }) :
+    return (React.createElement(React.Fragment, null, user ? React.createElement(AllSet, { user: user, token: token, desktopRedirectUrlId: desktopRedirectUrlId, setPageStatus: setPageStatus }) :
         React.createElement(Box, { sx: {
                 display: 'flex',
                 justifyContent: 'center',

package/dist/components/OnBoarding/authId/authIdSelectType.js

@@ -40,13 +40,15 @@ import { useEffect, useState } from "react";
 import berifymeApi from "../../../api/api";
 import theme from "../../theme";
 var AuthIdSelectType = function (_a) {
-    var setSelectedIdType = _a.setSelectedIdType, setError = _a.setError;
+    var setSelectedIdType = _a.setSelectedIdType, setError = _a.setError, setPageStatus = _a.setPageStatus;
     var _b = useState([]), idTypes = _b[0], setIdTypes = _b[1];
     var initTypeButton = function () { return __awaiter(void 0, void 0, void 0, function () {
         var result, documentTypes, filteredDocuments;
         return __generator(this, function (_a) {
             switch (_a.label) {
-                case 0: return [4 /*yield*/, berifymeApi.authID.getIdDocumentTypes({ token: localStorage.getItem('authID_token') || '' })];
+                case 0:
+                    setSelectedIdType('');
+                    return [4 /*yield*/, berifymeApi.authID.getIdDocumentTypes({ token: localStorage.getItem('authID_token') || '' })];
                 case 1:
                     result = _a.sent();
                     if (result.error) {
@@ -73,10 +75,12 @@ var AuthIdSelectType = function (_a) {
         console.log(idTypes);
     }, [idTypes]);
     return (React.createElement(Stack, { spacing: 2, alignItems: 'center' },
-        idTypes[0] && React.createElement(Button, { fullWidth: true, sx: { p: 2, maxWidth: 200, bgcolor: theme.palette.secondary.dark }, variant: "contained", color: 'secondary', onClick: function () { return setSelectedIdType(idTypes[0].Name); } },
+        idTypes[0] && React.createElement(Button, { fullWidth: true, sx: { p: 2, maxWidth: 200, bgcolor: theme.palette.secondary.dark }, variant: "contained", color: 'secondary', onClick: function () { if (setPageStatus)
+                setPageStatus(-1); setSelectedIdType(idTypes[0].Name); } },
             React.createElement(Typography, { variant: "h5", fontWeight: 700 }, "Upload ID")),
         idTypes[1] && React.createElement(Typography, { variant: "h5", fontWeight: 700, color: theme.palette.text.secondary }, "OR"),
-        idTypes[1] && React.createElement(Button, { fullWidth: true, sx: { p: 2, maxWidth: 200, bgcolor: theme.palette.secondary.dark }, variant: "contained", color: 'secondary', onClick: function () { return setSelectedIdType(idTypes[1].Name); } },
+        idTypes[1] && React.createElement(Button, { fullWidth: true, sx: { p: 2, maxWidth: 200, bgcolor: theme.palette.secondary.dark }, variant: "contained", color: 'secondary', onClick: function () { if (setPageStatus)
+                setPageStatus(-1); setSelectedIdType(idTypes[1].Name); } },
             React.createElement(Typography, { variant: "h5", fontWeight: 700 }, "Upload Passport"))));
 };
 export default AuthIdSelectType;

package/dist/components/OnBoarding/authId/index.js

@@ -47,16 +47,20 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import React from "react";
 import AuthIDComponent from "@authid/react-component";
-import { Box, CircularProgress } from "@mui/material";
-import { useEffect, useState } from "react";
+import { Box, CircularProgress, Stack, Typography } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
 import berifymeApi, { ActionType } from "../../../api/api";
 import { useSpeedTest } from "../../speedTest/SpeedProvider";
 import { createAuthenticationLog, updateAuthenticationLog } from "../../AuthenticationLogs";
 import { createDeveloperLog } from "../../createDeveloperLog";
+import AuthIdSelectType from "./authIdSelectType";
+import theme from "../../../theme";
 var AuthID = function (_a) {
-    var goToAllSet = _a.goToAllSet, setError = _a.setError, userId = _a.userId, setUser = _a.setUser, selectedIdType = _a.selectedIdType, token = _a.token;
+    var goToAllSet = _a.goToAllSet, setError = _a.setError, userId = _a.userId, setUser = _a.setUser, selectedIdType = _a.selectedIdType, setSelectedIdType = _a.setSelectedIdType, token = _a.token, setPageStatus = _a.setPageStatus;
     var _b = useState(''), operationId = _b[0], setOperationId = _b[1];
     var _c = useState(''), url = _c[0], setUrl = _c[1];
+    var _d = useState(false), showIdOrPassport = _d[0], setShowIdOrPassport = _d[1];
+    var docErrorCount = useRef(0);
     var stopSpeedTest = useSpeedTest().stopSpeedTest;
     useEffect(function () { stopSpeedTest(); }, []);
     //第零部 準備URL
@@ -283,8 +287,11 @@ var AuthID = function (_a) {
         });
     }); };
     //初始與監聽
-    useEffect(function () { if (selectedIdType !== '')
-        proofUser(); }, [selectedIdType]);
+    useEffect(function () {
+        docErrorCount.current = 0;
+        if (selectedIdType !== '')
+            proofUser();
+    }, [selectedIdType]);
     useEffect(function () {
         if (url) {
             window.addEventListener('message', function (e) {
@@ -295,6 +302,13 @@ var AuthID = function (_a) {
                             getProofTransactionStatus();
                         }, 1000);
                     }
+                    if (e.data.pageName === 'documentFailedPage') {
+                        docErrorCount.current += 1;
+                        if (docErrorCount.current >= 3) {
+                            setShowIdOrPassport(true);
+                        }
+                    }
+                    console.log('e.data.pageName: ', e.data.pageName);
                 }
             });
         }
@@ -309,15 +323,30 @@ var AuthID = function (_a) {
             });
         };
     }, [url]);
-    return (React.createElement(React.Fragment, null, React.createElement(React.Fragment, null, url
-        ? React.createElement(AuthIDComponent, { url: url, webauth: true })
-        : React.createElement(Box, { sx: {
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                height: '100vh',
-                background: '#FFFFFF'
-            } },
-            React.createElement(CircularProgress, null)))));
+    useEffect(function () {
+        console.log('error count: ', docErrorCount.current);
+    }, [docErrorCount.current]);
+    return (React.createElement(React.Fragment, null,
+        url ?
+            React.createElement(AuthIDComponent, { url: url, webauth: true })
+            : React.createElement(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    height: '100vh',
+                    background: '#FFFFFF'
+                } },
+                React.createElement(CircularProgress, null)),
+        showIdOrPassport &&
+            React.createElement(Box, { sx: {
+                    position: 'fixed',
+                    bottom: 0, left: 0,
+                    width: '100%', height: '36%',
+                    background: '#fff', textAlign: 'center',
+                    padding: '16px', zIndex: 1000, // 确保覆盖其他内容
+                } },
+                React.createElement(Stack, { spacing: 3, height: 1, justifyContent: 'center' },
+                    React.createElement(Typography, { variant: "body1", sx: { fontWeight: 'bold' }, color: theme.palette.text.secondary }, "Having trouble?"),
+                    React.createElement(AuthIdSelectType, { setSelectedIdType: setSelectedIdType, setError: setError, setPageStatus: setPageStatus })))));
 };
 export default AuthID;

package/dist/components/OnBoarding/clear/clearAllSet.js

@@ -43,7 +43,7 @@ import TryAgain from "../../TryAgain";
 import { updateAuthenticationLog } from "../../AuthenticationLogs";
 import { createDeveloperLog } from "../../createDeveloperLog";
 var ClearOnboardingAllSet = function (_a) {
-    var token = _a.token, desktopRedirectUrlId = _a.desktopRedirectUrlId;
+    var token = _a.token, desktopRedirectUrlId = _a.desktopRedirectUrlId, setPageStatus = _a.setPageStatus;
     var _b = useState(), user = _b[0], setUser = _b[1]; // berifyme user
     var _c = useState(), error = _c[0], setError = _c[1];
     var approve = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
@@ -105,7 +105,7 @@ var ClearOnboardingAllSet = function (_a) {
     }, []);
     if (error)
         return (React.createElement(TryAgain, { message: error }));
-    return (React.createElement(React.Fragment, null, user ? React.createElement(AllSet, { user: user, token: token, desktopRedirectUrlId: desktopRedirectUrlId }) :
+    return (React.createElement(React.Fragment, null, user ? React.createElement(AllSet, { user: user, token: token, desktopRedirectUrlId: desktopRedirectUrlId, setPageStatus: setPageStatus }) :
         React.createElement(Box, { sx: {
                 display: 'flex',
                 justifyContent: 'center',

package/dist/components/QrcodeExpired.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Stack, Typography } from "@mui/material";
+import theme from "../theme";
+import GppGoodOutlinedIcon from '@mui/icons-material/GppGoodOutlined';
+var QrcodeExpired = function () {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Stack, { height: 1, spacing: 4, justifyContent: 'space-between', py: 4, overflow: 'auto' },
+            React.createElement(Stack, { spacing: 2, textAlign: 'center', alignItems: 'center' },
+                React.createElement("img", { width: 60, height: 60, src: "https://staging.berify.me/errorIcon.png", alt: "berify" }),
+                React.createElement(Typography, { variant: "h2", fontWeight: 700 }, "QR Code Expired"),
+                React.createElement(Typography, { variant: "body1", color: theme.palette.text.secondary }, "The QR code is only active for 5 minutes."),
+                React.createElement(Typography, { variant: "body1", color: theme.palette.text.secondary }, "Return to the original sign up window to request for a new QR code.")),
+            React.createElement(Stack, { direction: 'row', spacing: 2, textAlign: 'center', justifyContent: 'center', color: theme.palette.text.secondary },
+                React.createElement(GppGoodOutlinedIcon, null),
+                React.createElement(Typography, { variant: "body1" }, "Securely powered by Berify.me")))));
+};
+export default QrcodeExpired;

package/dist/components/SessionInterrupted.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Stack, Typography } from "@mui/material";
+import theme from "../theme";
+import GppGoodOutlinedIcon from '@mui/icons-material/GppGoodOutlined';
+var SessionInterrupted = function () {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Stack, { height: 1, spacing: 4, justifyContent: 'space-between', py: 4, overflow: 'auto' },
+            React.createElement(Stack, { spacing: 2, textAlign: 'center', alignItems: 'center' },
+                React.createElement("img", { width: 60, height: 60, src: "https://staging.berify.me/warningIcon.png", alt: "berify" }),
+                React.createElement(Typography, { variant: "h2", fontWeight: 700 }, "Session Interrupted"),
+                React.createElement(Typography, { variant: "body1", color: theme.palette.text.secondary }, "The sign-up window on your desktop browser was closed."),
+                React.createElement(Typography, { variant: "body1", color: theme.palette.text.secondary }, "Please restart the process on your desktop browser to try again.")),
+            React.createElement(Stack, { direction: 'row', spacing: 2, textAlign: 'center', justifyContent: 'center', color: theme.palette.text.secondary },
+                React.createElement(GppGoodOutlinedIcon, null),
+                React.createElement(Typography, { variant: "body1" }, "Securely powered by Berify.me")))));
+};
+export default SessionInterrupted;

package/dist/enum/index.js

@@ -6,6 +6,8 @@ export var Environment;
 })(Environment || (Environment = {}));
 export var PageStatus;
 (function (PageStatus) {
+    PageStatus[PageStatus["SessionInterrupted"] = -3] = "SessionInterrupted";
+    PageStatus[PageStatus["QRCodeExpired"] = -2] = "QRCodeExpired";
     PageStatus[PageStatus["Loading"] = -1] = "Loading";
     PageStatus[PageStatus["SendSns"] = 0] = "SendSns";
     PageStatus[PageStatus["VerifyNewUser"] = 1] = "VerifyNewUser";

package/dist/types/BerifymeModal/index.d.ts

@@ -1,6 +1,6 @@
-import { Environment } from '../enum';
 import React from 'react';
 import '../../index.css';
+import { Environment } from '../enum';
 declare const HomeModal: React.FC<{
     apiKeyId: string;
     secretKey: string;

package/dist/types/api/api.d.ts

@@ -275,6 +275,12 @@ declare function checkThirdPartyVerificationToken(token: string): Promise<{
     companyName?: string | null;
     error?: string;
 }>;
+declare function checkDesktopRedirectUrlIdExpired({ token, desktopRedirectUrlId }: {
+    token: string;
+    desktopRedirectUrlId: string;
+}): Promise<{
+    error?: string;
+}>;
 declare function sendVerifyEmail(email: string): Promise<{
     success: boolean;
     error?: string;
@@ -561,6 +567,7 @@ declare const berifymeApi: {
     thirdParty: {
         getRedirectUrl: typeof getRedirectUrl;
         checkThirdPartyVerificationToken: typeof checkThirdPartyVerificationToken;
+        checkDesktopRedirectUrlIdExpired: typeof checkDesktopRedirectUrlIdExpired;
     };
     scheduld: {
         initUpdateAdminTokenSchedule: typeof initUpdateAdminTokenSchedule;

package/dist/types/components/AllSet/index.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
 import { User } from "../../api/api";
-declare const AllSet: ({ user, token, desktopRedirectUrlId }: {
+declare const AllSet: ({ user, token, desktopRedirectUrlId, setPageStatus }: {
     user: User | undefined;
     token: string | undefined;
     desktopRedirectUrlId?: string;
+    setPageStatus: React.Dispatch<React.SetStateAction<number>>;
 }) => React.JSX.Element;
 export default AllSet;

package/dist/types/components/Login/clearAllSet.d.ts

@@ -2,5 +2,6 @@ import React from "react";
 declare const ClearLoginAllSet: React.FC<{
     token?: string;
     desktopRedirectUrlId?: string;
+    setPageStatus: React.Dispatch<React.SetStateAction<number>>;
 }>;
 export { ClearLoginAllSet };

package/dist/types/components/OnBoarding/authId/authIdSelectType.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
-declare const AuthIdSelectType: ({ setSelectedIdType, setError, }: {
+declare const AuthIdSelectType: ({ setSelectedIdType, setError, setPageStatus, }: {
     setSelectedIdType: React.Dispatch<React.SetStateAction<string>>;
     setError: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setPageStatus?: React.Dispatch<React.SetStateAction<number>>;
 }) => React.JSX.Element;
 export default AuthIdSelectType;

package/dist/types/components/OnBoarding/authId/index.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 import { UserWithAgeAndFullName } from "../../../api/api";
-declare const AuthID: ({ goToAllSet, setError, userId, setUser, selectedIdType, token }: {
+declare const AuthID: ({ goToAllSet, setError, userId, setUser, selectedIdType, setSelectedIdType, token, setPageStatus }: {
     goToAllSet: () => void;
     setError: React.Dispatch<React.SetStateAction<string | undefined>>;
     userId: string;
     setUser?: React.Dispatch<React.SetStateAction<UserWithAgeAndFullName | undefined>>;
     selectedIdType: string;
+    setSelectedIdType: React.Dispatch<React.SetStateAction<string>>;
     token?: string;
+    setPageStatus?: React.Dispatch<React.SetStateAction<number>>;
 }) => React.JSX.Element;
 export default AuthID;

package/dist/types/components/OnBoarding/clear/clearAllSet.d.ts

@@ -2,5 +2,6 @@ import React from "react";
 declare const ClearOnboardingAllSet: React.FC<{
     token?: string;
     desktopRedirectUrlId?: string;
+    setPageStatus: React.Dispatch<React.SetStateAction<number>>;
 }>;
 export { ClearOnboardingAllSet };

package/dist/types/components/QrcodeExpired.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const QrcodeExpired: () => React.JSX.Element;
+export default QrcodeExpired;

package/dist/types/components/SessionInterrupted.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const SessionInterrupted: () => React.JSX.Element;
+export default SessionInterrupted;

package/dist/types/enum/index.d.ts

@@ -4,6 +4,8 @@ export declare enum Environment {
     Idv = "idv"
 }
 export declare enum PageStatus {
+    SessionInterrupted = -3,
+    QRCodeExpired = -2,
     Loading = -1,
     SendSns = 0,
     VerifyNewUser = 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytexbyte/berifyme-react-sdk",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
@@ -8,7 +8,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc && copyfiles -u 1 'src/**/*.{css,svg}' dist",
     "webpack": "webpack",
-    "esbuild": "node esbuild.config.js"
+    "esbuild": "node esbuild.config.js",
+    "release": "yarn build && npm publish"
   },
   "keywords": [],
   "author": "",