@bytexbyte/berifyme-react-sdk 1.0.17 → 1.0.20

package/dist/BerifymeModal/index.js

@@ -50,19 +50,19 @@ import { ClearOnboarding } from '../components/OnBoarding/clear';
 import { ClearOnboardingAllSet } from '../components/OnBoarding/clear/clearAllSet';
 import { IncodeOnBoarding } from '../components/OnBoarding/incode';
 import Vender from '../components/OnBoarding/vender';
+import QrcodeExpired from '../components/QrcodeExpired';
 import RedirectToMobile from '../components/RedirectToMobile';
 import ScreenRotation from '../components/ScreenRotation';
 import SendSns from '../components/SendSns';
-import theme from '../components/theme';
+import SessionInterrupted from '../components/SessionInterrupted';
 import SomethingWrong from '../components/SomethingWrong';
+import theme from '../components/theme';
 import VerifyNewUser from '../components/VerifyWithPhoneNumber/NewUser';
 import VerifyUser from '../components/VerifyWithPhoneNumber/User';
 import { getPageStatusString, 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, onUpdate = _a.onUpdate;
     var _c = useState(window.innerWidth > window.innerHeight), isLandscape = _c[0], setIsLandscape = _c[1];
@@ -353,7 +353,7 @@ var HomeModal = function (_a) {
                                 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(PageStatus.AllSet); }, setError: setError }),
+                                    React.createElement(IncodeOnBoarding, { user: user, setUser: setUser, token: token, goToAllSet: function () { return setPageStatus(PageStatus.AllSet); }, setError: setError, onGoBack: function () { return setPageStatus(PageStatus.Vender); } }),
                                 pageStatus === PageStatus.AuthidLogin && processedPhoneNumber &&
                                     React.createElement(AuthidLogin, { token: token, goToAllSet: function () { return setPageStatus(PageStatus.AllSet); }, phoneNumber: processedPhoneNumber, setUser: setUser, setError: setError }),
                                 pageStatus === PageStatus.ClearLogin &&

package/dist/api/api.js

@@ -569,11 +569,9 @@ function getUserByIncodeId(_a) {
             switch (_c.label) {
                 case 0:
                     url = "".concat(config.backendDomain, "/api/user/getUserByIncodeId?customerId=").concat(customerId, "&interviewId=").concat(interviewId).concat(token ? "&token=".concat(token) : '');
-                    console.log('UrlString: ', url);
                     return [4 /*yield*/, axios.get(url)];
                 case 1:
                     res = _c.sent();
-                    console.log('UrlRes data: ', res.data);
                     return [2 /*return*/, res.data];
             }
         });
@@ -794,6 +792,40 @@ function createSessionToken(_a) {
         });
     });
 }
+/** SnapMatch（1:N）用：建立 session token（無 redirectUrl），回傳 sessionToken（session_ 前綴） */
+function createSessionTokenWithoutRedirectUrl(_a) {
+    return __awaiter(this, arguments, void 0, function (_b) {
+        var url, res, error_2;
+        var _c;
+        var apiKeyId = _b.apiKeyId, secretKey = _b.secretKey;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    url = "".concat(config.backendDomain, "/api/thirdParty/createTokenWithoutRedirectUrl");
+                    _d.label = 1;
+                case 1:
+                    _d.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, axios.post(url, {
+                            apiKeyId: apiKeyId,
+                            secretKey: secretKey,
+                        })];
+                case 2:
+                    res = _d.sent();
+                    return [2 /*return*/, res.data];
+                case 3:
+                    error_2 = _d.sent();
+                    if (error_2.response) {
+                        return [2 /*return*/, { error: ((_c = error_2.response.data) === null || _c === void 0 ? void 0 : _c.error) || 'An error occurred. Please try again.' }];
+                    }
+                    else if (error_2.request) {
+                        return [2 /*return*/, { error: 'No response from server. Please check your network and try again.' }];
+                    }
+                    return [2 /*return*/, { error: 'Unexpected error. Please try again later.' }];
+                case 4: return [2 /*return*/];
+            }
+        });
+    });
+}
 function createAuthenticationLogs(_a) {
     return __awaiter(this, arguments, void 0, function (_b) {
         var url, res;
@@ -848,7 +880,7 @@ function updateAuthenticationLogs(_a) {
 }
 function createDeveloperLog(_a) {
     return __awaiter(this, arguments, void 0, function (_b) {
-        var url, res, error_2;
+        var url, res, error_3;
         var userId = _b.userId, sessionToken = _b.sessionToken, action = _b.action, firstDetail = _b.firstDetail, secondDetail = _b.secondDetail, userDataJson = _b.userDataJson, source = _b.source, browser = _b.browser;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -876,9 +908,9 @@ function createDeveloperLog(_a) {
                     res = _c.sent();
                     return [2 /*return*/, res.data];
                 case 3:
-                    error_2 = _c.sent();
-                    console.error('Error creating developer log:', error_2);
-                    throw error_2;
+                    error_3 = _c.sent();
+                    console.error('Error creating developer log:', error_3);
+                    throw error_3;
                 case 4: return [2 /*return*/];
             }
         });
@@ -1181,6 +1213,7 @@ var berifymeApi = {
         getRedirectUrl: getRedirectUrl,
         checkThirdPartyVerificationToken: checkThirdPartyVerificationToken,
         checkDesktopRedirectUrlIdExpired: checkDesktopRedirectUrlIdExpired,
+        createSessionTokenWithoutRedirectUrl: createSessionTokenWithoutRedirectUrl,
     },
     scheduld: {
         initUpdateAdminTokenSchedule: initUpdateAdminTokenSchedule,

package/dist/components/AllSet/index.js

@@ -101,9 +101,9 @@ var AllSet = function (_a) {
         checkOldDeviceId();
     }, [user === null || user === void 0 ? void 0 : user.phoneNumber]);
     var checkAndIssueToken = function () {
-        // if (user) {
-        //   berifymeApi.blockchain.checkAndIssueToken({ userId: user.id });
-        // }
+        if (user) {
+            berifymeApi.blockchain.checkAndIssueToken({ userId: user.id });
+        }
     };
     var startSpeedTest = useSpeedTest().startSpeedTest;
     useEffect(function () {

package/dist/components/OnBoarding/incode/SelectType.js

@@ -34,15 +34,19 @@ 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 { Button, Stack, Typography } from "@mui/material";
-import Layout from "../../Layout";
+import CloseIcon from "@mui/icons-material/Close";
+import { Button, IconButton, Stack, Typography } from "@mui/material";
 import React from "react";
+import Layout from "../../Layout";
 var SelectType = function (_a) {
-    var goToID = _a.goToID, goToPassport = _a.goToPassport;
+    var goToID = _a.goToID, goToPassport = _a.goToPassport, onCloseButtonClick = _a.onCloseButtonClick;
     return (React.createElement(React.Fragment, null,
         React.createElement(Layout, null,
             React.createElement(Stack, { minHeight: 1, width: 1, spacing: 4, maxHeight: 900, py: 20, justifyContent: 'space-between' },
                 React.createElement(Stack, { spacing: 2 },
+                    React.createElement(Stack, { direction: 'row', justifyContent: 'flex-end' },
+                        React.createElement(IconButton, { onClick: onCloseButtonClick },
+                            React.createElement(CloseIcon, null))),
                     React.createElement(Stack, { spacing: 1, textAlign: 'center' },
                         React.createElement(Typography, { variant: "h3", fontWeight: 700 }, "Select what document you want to scan"))),
                 React.createElement(Stack, { spacing: 2, alignItems: 'center' },

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

@@ -34,23 +34,22 @@ 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 React from "react";
-import { useEffect, useRef, useState } from "react";
-import Steps from "./Steps";
-import { UserConsent } from "./UserConsent";
-import { FrontId } from "./FrontId";
-import { BackId } from "./BackId";
-import { ProcessId } from "./ProcessId";
-import { Selfie } from "./Selfie";
-import { ProcessFace } from "./ProcessFace";
-import { FinishOnboarding } from "./FinishOnboarding";
-import SelectType from "./SelectType";
-import { Passport } from "./Passport";
 import { Box, CircularProgress } from "@mui/material";
+import React, { useEffect, useRef, useState } from "react";
 import berifymeApi, { ActionType } from "../../../api/api";
 import { createAuthenticationLog, updateAuthenticationLog } from "../../AuthenticationLogs";
 import { createDeveloperLog } from "../../createDeveloperLog";
+import { BackId } from "./BackId";
+import { FinishOnboarding } from "./FinishOnboarding";
+import { FrontId } from "./FrontId";
+import { Passport } from "./Passport";
+import { ProcessFace } from "./ProcessFace";
 import { ProcessGlobalWatchlist } from "./processGlobalWatchlist";
+import { ProcessId } from "./ProcessId";
+import SelectType from "./SelectType";
+import { Selfie } from "./Selfie";
+import Steps from "./Steps";
+import { UserConsent } from "./UserConsent";
 function startOnboardingSession(_a) {
     return __awaiter(this, arguments, void 0, function (_b) {
         var res;
@@ -66,7 +65,7 @@ function startOnboardingSession(_a) {
     });
 }
 var IncodeOnBoarding = function (_a) {
-    var user = _a.user, setUser = _a.setUser, goToAllSet = _a.goToAllSet, token = _a.token, setError = _a.setError;
+    var user = _a.user, setUser = _a.setUser, goToAllSet = _a.goToAllSet, token = _a.token, setError = _a.setError, onGoBack = _a.onGoBack;
     var _b = useState(0), step = _b[0], setStep = _b[1]; // Store the current step
     var _c = useState(null), session = _c[0], setSession = _c[1]; // Stores the Session
     var isLoaded = useRef(false);
@@ -218,7 +217,7 @@ var IncodeOnBoarding = function (_a) {
             React.createElement(CircularProgress, null)));
     return (React.createElement(React.Fragment, null, user.id && React.createElement(Steps, { currentStep: step },
         React.createElement(UserConsent, { session: session, onSuccess: goNext }),
-        React.createElement(SelectType, { goToID: goNext, goToPassport: function () { goTo(4); } }),
+        React.createElement(SelectType, { goToID: goNext, goToPassport: function () { goTo(4); }, onCloseButtonClick: onGoBack }),
         React.createElement(FrontId, { session: session, onError: handleError, onSuccess: goNext }),
         React.createElement(BackId, { session: session, onError: handleError, onSuccess: function () { goTo(5); } }),
         React.createElement(Passport, { session: session, onError: handleError, onSuccess: goNext }),

package/dist/components/SendSns/index.js

@@ -130,7 +130,7 @@ var SendSns = function (_a) {
                         })];
                 case 2:
                     webauthnLogin = _f.sent();
-                    if (!webauthnLogin.success) return [3 /*break*/, 5];
+                    if (!webauthnLogin.success) return [3 /*break*/, 6];
                     createDeveloperLog({
                         userId: (_d = webauthnLogin.user.id) !== null && _d !== void 0 ? _d : '',
                         source: 'FRONTEND',
@@ -139,10 +139,13 @@ var SendSns = function (_a) {
                         userDataJson: webauthnLogin.user,
                     });
                     setUser(webauthnLogin.user);
+                    return [4 /*yield*/, berifymeApi.wallet.getWallet({ phoneNumber: processedInputValue })];
+                case 3:
+                    _f.sent();
                     deviceId = localStorage.getItem('deviceId');
-                    if (!(deviceId && token)) return [3 /*break*/, 4];
+                    if (!(deviceId && token)) return [3 /*break*/, 5];
                     return [4 /*yield*/, berifymeApi.user.checkDeviceId({ phoneNumber: processedInputValue, deviceId: deviceId, token: token })];
-                case 3:
+                case 4:
                     deviceUser = _f.sent();
                     if (deviceUser.user) {
                         createDeveloperLog({
@@ -182,8 +185,8 @@ var SendSns = function (_a) {
                         firstDetail: deviceUser.error,
                         secondDetail: "deviceId: ".concat(deviceId),
                     });
-                    _f.label = 4;
-                case 4:
+                    _f.label = 5;
+                case 5:
                     // const blockchainToken = await berifymeApi.blockchain.getNFTToken({ phoneNumber: processedInputValue });
                     // if (blockchainToken && blockchainToken.nfts.length > 0 && token) {
                     //   const blockchainTokenId = blockchainToken.nfts[0].tokenId;
@@ -246,17 +249,17 @@ var SendSns = function (_a) {
                         secondDetail: 'webauthn success'
                     });
                     return [2 /*return*/];
-                case 5:
+                case 6:
                     createDeveloperLog({
                         source: 'FRONTEND',
                         action: 'webauthnLogin failed',
                         sessionToken: token,
                     });
-                    _f.label = 6;
-                case 6:
-                    if (!(getVender.vender === null)) return [3 /*break*/, 8];
-                    return [4 /*yield*/, berifymeApi.auth.sendPhoneNumberCode({ phoneNumber: processedInputValue, token: token })];
+                    _f.label = 7;
                 case 7:
+                    if (!(getVender.vender === null)) return [3 /*break*/, 9];
+                    return [4 /*yield*/, berifymeApi.auth.sendPhoneNumberCode({ phoneNumber: processedInputValue, token: token })];
+                case 8:
                     res = _f.sent();
                     if (res.success) {
                         setPageStatus(1);
@@ -275,9 +278,9 @@ var SendSns = function (_a) {
                             firstDetail: res.error,
                         });
                     }
-                    return [3 /*break*/, 10];
-                case 8: return [4 /*yield*/, berifymeApi.auth.sendPhoneNumberCode({ phoneNumber: processedInputValue, token: token })];
-                case 9:
+                    return [3 /*break*/, 11];
+                case 9: return [4 /*yield*/, berifymeApi.auth.sendPhoneNumberCode({ phoneNumber: processedInputValue, token: token })];
+                case 10:
                     res = _f.sent();
                     if (res.success) {
                         setModalHeight('50vh');
@@ -297,8 +300,8 @@ var SendSns = function (_a) {
                             firstDetail: res.error,
                         });
                     }
-                    _f.label = 10;
-                case 10:
+                    _f.label = 11;
+                case 11:
                     setIsLoading(false);
                     createDeveloperLog({
                         source: 'FRONTEND',

package/dist/components/SnapMatch/ExceptionView.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Button, Container, Stack, Typography } from "@mui/material";
+import WarningAmberRoundedIcon from "@mui/icons-material/WarningAmberRounded";
+import { getSnapMatchResultTranslations } from "./translations";
+var ExceptionView = function (_a) {
+    var lang = _a.lang, message = _a.message, onBack = _a.onBack, _b = _a.returnLoading, returnLoading = _b === void 0 ? false : _b, _c = _a.autoRedirectSeconds, autoRedirectSeconds = _c === void 0 ? 0 : _c, _d = _a.countdown, countdown = _d === void 0 ? 0 : _d;
+    var t = getSnapMatchResultTranslations(lang);
+    var handleBack = function () {
+        if (onBack)
+            onBack();
+        else
+            window.location.reload();
+    };
+    return (React.createElement(Container, { maxWidth: "sm", sx: { px: 3 } },
+        React.createElement(Stack, { height: "100vh", width: 1, maxHeight: 900, justifyContent: "center", alignItems: "center", spacing: 4 },
+            React.createElement(WarningAmberRoundedIcon, { sx: { fontSize: 64, color: "warning.main" }, "aria-hidden": true }),
+            React.createElement(Typography, { variant: "h3", fontWeight: 700, textAlign: "center", sx: { whiteSpace: "pre-line" } }, t.exceptionTitle),
+            React.createElement(Typography, { variant: "body1", color: "text.secondary", textAlign: "center", sx: { whiteSpace: "pre-line" } }, message !== null && message !== void 0 ? message : t.exceptionDescription),
+            autoRedirectSeconds > 0 && (React.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { whiteSpace: "pre-line" } }, countdown > 0 ? t.countdownReturn(countdown) : t.redirecting)),
+            React.createElement(Button, { variant: "contained", color: "warning", onClick: handleBack, disabled: returnLoading, fullWidth: true, sx: { whiteSpace: "pre-line" } }, returnLoading ? t.redirecting : t.backToVerification))));
+};
+export default ExceptionView;

package/dist/components/SnapMatch/LangSelector.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Box, Button, Typography } from "@mui/material";
+import TranslateIcon from "@mui/icons-material/Translate";
+export var LANG_OPTIONS = [
+    { value: "en", label: "English" },
+    { value: "zh-TW", label: "繁體中文" },
+];
+function LangSelector(_a) {
+    var _b, _c;
+    var lang = _a.lang, onLangChange = _a.onLangChange;
+    var nextLang = lang === "en" ? "zh-TW" : "en";
+    var currentLabel = (_c = (_b = LANG_OPTIONS.find(function (o) { return o.value === lang; })) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : lang;
+    return (React.createElement(Box, { sx: {
+            position: "fixed",
+            top: 16,
+            right: 16,
+            zIndex: 2147483647,
+            pointerEvents: "auto",
+        } },
+        React.createElement(Button, { variant: "outlined", size: "small", onClick: function () { return onLangChange(nextLang); }, startIcon: React.createElement(TranslateIcon, null), sx: {
+                bgcolor: "background.paper",
+                "&:hover": { bgcolor: "action.hover" },
+            } },
+            React.createElement(Typography, { variant: "body2" }, currentLabel))));
+}
+export default LangSelector;

package/dist/components/SnapMatch/SnapMatchStep.js

@@ -0,0 +1,122 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React, { useEffect, useRef } from "react";
+import { Box, CircularProgress } from "@mui/material";
+import { createIncodeLogin } from "../../vender/incode/incode";
+/** 清空容器前先停止所有 video 的 MediaStream，正確釋放相機，避免 reload 後新頁面無法取得相機或卡在權限 */
+function stopAllMediaStreamsInContainer(container) {
+    try {
+        container.querySelectorAll("video").forEach(function (el) {
+            var src = el.srcObject;
+            if (src && typeof src.getTracks === "function") {
+                src.getTracks().forEach(function (track) { return track.stop(); });
+            }
+        });
+    }
+    catch (_a) {
+        // ignore
+    }
+}
+/**
+ * 直接開啟 Incode SnapMatch（1:N）驗證步驟。
+ * 與 Frontend SnapMatchStep 對齊：僅依 lang 建立實例並轉發結果，父層負責 getUserByIncodeId 與 step。
+ * 以 key={`${lang}-${loginKey}`} 渲染可強制語系切換/返回時完整重掛載，避免 Incode 翻譯 cache。
+ */
+var SnapMatchStep = function (_a) {
+    var lang = _a.lang, loginKey = _a.loginKey, onSuccess = _a.onSuccess, onError = _a.onError;
+    var containerRef = useRef(null);
+    var loginKeyRef = useRef(loginKey);
+    loginKeyRef.current = loginKey;
+    useEffect(function () {
+        var container = containerRef.current;
+        if (!container)
+            return;
+        var cancelled = false;
+        var currentKey = loginKeyRef.current;
+        // 延遲再掛載，讓上一輪 cleanup（清空容器、釋放相機）完成，避免 Incode 全域 i18n/狀態殘留導致翻譯錯亂
+        var delayMs = 120;
+        var t = setTimeout(function () {
+            if (cancelled)
+                return;
+            void createIncodeLogin(lang).then(function (instance) {
+                var _a;
+                if (cancelled || !containerRef.current)
+                    return;
+                instance.renderLogin(container, {
+                    onSuccess: function (response) { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            if (cancelled)
+                                return [2 /*return*/];
+                            onSuccess({
+                                customerId: response.customerId,
+                                interviewId: response.interviewId,
+                                token: response.token,
+                                transactionId: response.transactionId,
+                            }, { loginKey: currentKey });
+                            return [2 /*return*/];
+                        });
+                    }); },
+                    onError: function () {
+                        if (cancelled)
+                            return;
+                        onError();
+                    },
+                    stopAtError: true,
+                    timeout: 1000 * 60 * 60 * 24,
+                });
+                if ((_a = instance.i18n) === null || _a === void 0 ? void 0 : _a.changeLanguage) {
+                    setTimeout(function () {
+                        var _a, _b;
+                        if (cancelled)
+                            return;
+                        void ((_b = (_a = instance.i18n) === null || _a === void 0 ? void 0 : _a.changeLanguage) === null || _b === void 0 ? void 0 : _b.call(_a, "en"));
+                    }, 200);
+                }
+            });
+        }, delayMs);
+        return function () {
+            cancelled = true;
+            clearTimeout(t);
+            stopAllMediaStreamsInContainer(container);
+            container.innerHTML = "";
+        };
+    }, [lang, loginKey, onSuccess, onError]);
+    return (React.createElement("div", { ref: containerRef, style: { width: "100%", height: "100%", minHeight: "100vh" } },
+        React.createElement(Box, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh", background: "#FFFFFF" } },
+            React.createElement(CircularProgress, null))));
+};
+export default SnapMatchStep;

package/dist/components/SnapMatch/SuccessView.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Button, Stack, Typography } from "@mui/material";
+import VerifiedRoundedIcon from "@mui/icons-material/VerifiedRounded";
+import Layout from "../Layout";
+import { getSnapMatchResultTranslations } from "./translations";
+import theme from "../theme";
+var SuccessView = function (_a) {
+    var lang = _a.lang, fullName = _a.fullName, onContinue = _a.onContinue, _b = _a.returnLoading, returnLoading = _b === void 0 ? false : _b, _c = _a.autoRedirectSeconds, autoRedirectSeconds = _c === void 0 ? 3 : _c, _d = _a.countdown, countdown = _d === void 0 ? 0 : _d;
+    var t = getSnapMatchResultTranslations(lang);
+    return (React.createElement(Layout, null,
+        React.createElement(Stack, { height: 1, width: 1, maxHeight: 900, justifyContent: "center", alignItems: "center", spacing: 4, py: 4 },
+            React.createElement(VerifiedRoundedIcon, { color: "success", sx: { fontSize: 64 } }),
+            React.createElement(Typography, { variant: "h1", textAlign: "center", sx: { whiteSpace: "pre-line" } },
+                fullName ? "\uD83C\uDF89 ".concat(fullName) : "🎉",
+                React.createElement("br", null),
+                React.createElement("br", null),
+                t.successTitle),
+            React.createElement(Typography, { variant: "body1", color: theme.palette.info.light, textAlign: "center", sx: { whiteSpace: "pre-line" } }, t.successDescription),
+            autoRedirectSeconds > 0 && (React.createElement(Typography, { variant: "body2", color: theme.palette.info.light, sx: { whiteSpace: "pre-line" } }, countdown > 0 ? t.countdownReturn(countdown) : t.redirecting)),
+            React.createElement(Button, { variant: "contained", color: "primary", onClick: function () { return (onContinue ? onContinue() : window.close()); }, disabled: returnLoading, fullWidth: true, sx: { whiteSpace: "pre-line" } }, returnLoading ? t.redirecting : t.nextPerson))));
+};
+export default SuccessView;

package/dist/components/SnapMatch/TryAgainView.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Button, Container, Stack, Typography } from "@mui/material";
+import { getSnapMatchResultTranslations } from "./translations";
+var TryAgainView = function (_a) {
+    var lang = _a.lang, message = _a.message, onRetry = _a.onRetry, _b = _a.retryLoading, retryLoading = _b === void 0 ? false : _b, _c = _a.autoRedirectSeconds, autoRedirectSeconds = _c === void 0 ? 0 : _c, _d = _a.countdown, countdown = _d === void 0 ? 0 : _d;
+    var t = getSnapMatchResultTranslations(lang);
+    var handleContinue = function () {
+        if (onRetry)
+            onRetry();
+        else
+            window.location.reload();
+    };
+    return (React.createElement(Container, { maxWidth: "sm", sx: { px: 3 } },
+        React.createElement(Stack, { height: "100vh", width: 1, maxHeight: 900, justifyContent: "center", alignItems: "center", spacing: 4 },
+            React.createElement(Typography, { variant: "h3", fontWeight: 700, textAlign: "center", sx: { whiteSpace: "pre-line" } }, message !== null && message !== void 0 ? message : t.failureDefault),
+            autoRedirectSeconds > 0 && (React.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { whiteSpace: "pre-line" } }, countdown > 0 ? t.countdownReturn(countdown) : t.redirecting)),
+            React.createElement(Button, { variant: "contained", color: "primary", onClick: handleContinue, disabled: retryLoading, sx: { whiteSpace: "pre-line" } }, retryLoading ? t.redirecting : t.retry))));
+};
+export default TryAgainView;