idmission-web-sdk 1.0.58 → 1.0.60

package/README.md

@@ -293,6 +293,7 @@ Render a fullscreen capture component that analyzes frames from the user's front
 <tr><td><code>guidanceRemoveEyeCoveringsText</code></td><td>Default: "Please remove your eye coverings (sunglasses, eye patch, etc.)..."</td></tr>
 <tr><td><code>guidanceRemoveHeadCoveringsText</code></td><td>Default: "Please remove your head coverings (hat, scarf, etc.)..."</td></tr>
 <tr><td><code>guidanceRemoveMaskText</code></td><td>Default: "Please remove your mask..."</td></tr>
+<tr><td><code>progressPreviewText</code></td><td>Default: "Processing..."</td></tr>
 <tr><td><code>success.headingText</code></td><td>Default: "Face liveness has been verified!"</td></tr>
 <tr><td><code>success.retryBtnText</code></td><td>Default: "Retry"</td></tr>
 <tr><td><code>success.doneBtnText</code></td><td>Default: "Done"</td></tr>
@@ -629,6 +630,7 @@ Render a fullscreen capture component that analyzes frames from the user's front
 <tr><td><code>guidanceMoveBackText</code></td><td>Default: "Move back..."</td></tr>
 <tr><td><code>guidanceMoveForwardText</code></td><td>Default: "Move forward..."</td></tr>
 <tr><td><code>guidanceMoveToCenterText</code></td><td>Default: "Move to the center..."</td></tr>
+<tr><td><code>progressPreviewText</code></td><td>Default: "Processing..."</td></tr>
 <tr><td><code>success.headingText</code></td><td>Default: "Customer has been identified!"</td></tr>
 <tr><td><code>success.retryBtnText</code></td><td>Default: "Retry"</td></tr>
 <tr><td><code>success.doneBtnText</code></td><td>Default: "Done"</td></tr>

package/dist/components/common/SelfieProgressPreview.d.ts

@@ -3,6 +3,7 @@ export declare const IdCaptureImagePreview: ({ text, imageUrl, }: {
     text?: string | undefined;
     imageUrl: string;
 }) => React.JSX.Element;
-export declare const SelfieProgressPreview: ({ imageUrl }: {
+export declare const SelfieProgressPreview: ({ text, imageUrl, }: {
+    text: string;
     imageUrl: string;
 }) => React.JSX.Element;

package/dist/components/customer_identification/CustomerIdentificationCapture.d.ts

@@ -1,8 +1,11 @@
 import { ReactElement } from 'react';
 import { SelfieCaptureColors, SelfieCaptureVerbiage } from '../selfie_capture/SelfieCapture';
 import { SubmissionRequest, SubmissionResponse } from '../../contexts/SubmissionContext';
+import { CustomerSuppliedVerbiage } from '../../lib/locales';
 export type CustomerIdentificationCaptureColors = SelfieCaptureColors;
-export type CustomerIdentificationCaptureVerbiage = SelfieCaptureVerbiage;
+export type CustomerIdentificationCaptureVerbiage = SelfieCaptureVerbiage & {
+    progressPreviewText?: CustomerSuppliedVerbiage;
+};
 export type CustomerIdentificationCaptureProps = {
     onCustomerMatched?: (resp: SubmissionResponse, req: SubmissionRequest) => void;
     onCustomerNotMatched?: (resp: SubmissionResponse, req: SubmissionRequest) => void;

package/dist/components/customer_verification/CustomerVerificationCapture.d.ts

@@ -1,8 +1,11 @@
 import { ReactElement } from 'react';
 import { SubmissionRequest, SubmissionResponse } from '../../contexts/SubmissionContext';
 import { SelfieCaptureColors, SelfieCaptureVerbiage } from '../selfie_capture/SelfieCapture';
+import { CustomerSuppliedVerbiage } from '../../lib/locales';
 export type CustomerVerificationCaptureColors = SelfieCaptureColors;
-export type CustomerVerificationCaptureVerbiage = SelfieCaptureVerbiage;
+export type CustomerVerificationCaptureVerbiage = SelfieCaptureVerbiage & {
+    progressPreviewText?: CustomerSuppliedVerbiage;
+};
 export type CustomerVerificationCaptureProps = {
     onCustomerMatched?: (resp: SubmissionResponse, req: SubmissionRequest) => void;
     onCustomerNotMatched?: (resp: SubmissionResponse, req: SubmissionRequest) => void;

package/dist/components/face_liveness/FaceLivenessCapture.d.ts

@@ -6,6 +6,7 @@ export type FaceLivenessCaptureVerbiage = SelfieCaptureVerbiage & {
     guidanceRemoveEyeCoveringsText?: CustomerSuppliedVerbiage;
     guidanceRemoveHeadCoveringsText?: CustomerSuppliedVerbiage;
     guidanceRemoveMaskText?: CustomerSuppliedVerbiage;
+    progressPreviewText?: CustomerSuppliedVerbiage;
 };
 export type FaceLivenessCaptureProps = {
     onCapture?: () => void;

package/dist/components/submission/Errors.d.ts

@@ -5,3 +5,8 @@ export declare class SubmissionError extends Error {
 }
 export declare class NetworkError extends Error {
 }
+export declare class TokenPublicKeyError extends Error {
+    err: Error;
+    host: string;
+    constructor(err: Error, host: string);
+}

package/dist/components/submission/SubmissionProvider.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 import { CardData, LivenessCheckRequest, PersonalData, SubmissionAction, SubmissionEnvironment, SubmissionRequest, SubmissionResponse } from '../../contexts/SubmissionContext';
+export type TokenState = 'NOT_PARSED' | 'PARSING' | 'GOOD' | 'EXPIRED' | 'INVALID_FORMAT' | 'INVALID_SIGNATURE' | 'MISSING' | 'PUBLIC_KEY_LOAD_FAILED';
 export type SubmissionProviderProps = {
     action: SubmissionAction;
     children: ReactElement;

package/dist/components/submission/TokenExpiredErrorOverlay.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TokenExpiredErrorOverlay: () => React.JSX.Element;

package/dist/components/submission/TokenInvalidFormatErrorOverlay.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TokenInvalidFormatErrorOverlay: () => React.JSX.Element;

package/dist/components/submission/TokenInvalidSignatureErrorOverlay.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TokenInvalidSignatureErrorOverlay: () => React.JSX.Element;

package/dist/components/submission/TokenMissingErrorOverlay.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TokenMissingErrorOverlay: () => React.JSX.Element;

package/dist/components/submission/TokenPublicKeyErrorOverlay.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TokenPublicKeyError } from './Errors';
+export declare const TokenPublicKeyErrorOverlay: ({ error, }: {
+    error: TokenPublicKeyError | null;
+}) => React.JSX.Element;

package/dist/contexts/SubmissionContext.d.ts

@@ -181,6 +181,7 @@ export type SubmissionState = {
     retryLocationAccess: () => void;
 };
 export declare const SubmissionContext: import("react").Context<SubmissionState>;
+export declare function parseJwt(token: string): Record<string, unknown>;
 export declare function determineSubmissionHost(environment: SubmissionEnvironment, token?: string): string;
 export declare function determineSubmissionEndpoint(action: SubmissionAction, hasId: boolean, hasSelfie: boolean, hasToken: boolean): string;
 export declare function liveCheckEndpoint(hasToken: boolean): string;

package/dist/lib/locales/es/translation.d.ts

@@ -6,6 +6,7 @@ declare const _default: {
     'Camera access blocked': string;
     'Location access blocked': string;
     Continue: string;
+    'Processing...': string;
     'Your camera permission is disabled': string;
     'This application requires access to your camera to continue. Please accept the permission once prompted by the browser. If the browser does not prompt for camera permissions, you must go to settings and provide camera access to the current browser.': string;
     'Your location permission is disabled': string;

package/dist/lib/locales/index.d.ts

@@ -14,6 +14,7 @@ export declare const resources: {
             'Camera access blocked': string;
             'Location access blocked': string;
             Continue: string;
+            'Processing...': string;
             'Your camera permission is disabled': string;
             'This application requires access to your camera to continue. Please accept the permission once prompted by the browser. If the browser does not prompt for camera permissions, you must go to settings and provide camera access to the current browser.': string;
             'Your location permission is disabled': string;

package/dist/sdk2.cjs.development.js

@@ -7,6 +7,7 @@ var React = require('react');
 var ReactDOM = require('react-dom/client');
 var styled = require('styled-components');
 var reactI18next = require('react-i18next');
+var jsrsasign = require('jsrsasign');
 var tf = require('@tensorflow/tfjs');
 var useResizeObserver = require('use-resize-observer');
 var LanguageDetector = require('i18next-browser-languagedetector');
@@ -46,7 +47,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.58';
+var webSdkVersion = '1.0.60';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -418,6 +419,16 @@ var NetworkError = /** @class */function (_super) {
   }
   return NetworkError;
 }(Error);
+var TokenPublicKeyError = /** @class */function (_super) {
+  tslib.__extends(TokenPublicKeyError, _super);
+  function TokenPublicKeyError(err, host) {
+    var _this = _super.call(this, err.message) || this;
+    _this.err = err;
+    _this.host = host;
+    return _this;
+  }
+  return TokenPublicKeyError;
+}(Error);
 
 var SubmissionErrorOverlay = function SubmissionErrorOverlay(_a) {
   var error = _a.error,
@@ -482,6 +493,161 @@ var NetworkErrorContent = function NetworkErrorContent(_a) {
   }, retryText))));
 };
 
+var TokenMissingErrorOverlay = function TokenMissingErrorOverlay() {
+  return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, {
+    style: {
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("h3", {
+    style: {
+      marginBottom: 8
+    }
+  }, "IDmission WebSDK failed to load"), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      marginBottom: 0
+    }
+  }, "Required property ", /*#__PURE__*/React__default['default'].createElement("code", null, "submissionToken"), " is missing."), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      lineHeight: '1.5rem'
+    }
+  }, "Please refer to the", ' ', /*#__PURE__*/React__default['default'].createElement("a", {
+    href: "https://www.npmjs.com/package/idmission-web-sdk#getting-started",
+    target: "_blank",
+    rel: "noreferrer"
+  }, "Getting Started"), ' ', "section of the documentation for information on how to use your credentials to generate a valid", ' ', /*#__PURE__*/React__default['default'].createElement("a", {
+    href: "https://jwt.io",
+    target: "_blank",
+    rel: "noreferrer"
+  }, "JSON Web Token"), ' ', "for your IDmission account. Every usage of the IDmission WebSDK must be authorized with a valid JWT from IDmission's servers.")));
+};
+
+var TokenInvalidFormatErrorOverlay = function TokenInvalidFormatErrorOverlay() {
+  return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, {
+    style: {
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("h3", {
+    style: {
+      marginBottom: 8
+    }
+  }, "IDmission WebSDK failed to load"), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      marginBottom: 0
+    }
+  }, "Required property ", /*#__PURE__*/React__default['default'].createElement("code", null, "submissionToken"), " is invalid."), /*#__PURE__*/React__default['default'].createElement("p", null, "JSON Web Tokens consist of three parts separated by dots (", /*#__PURE__*/React__default['default'].createElement("code", null, "."), "), which are:"), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("ul", {
+    style: {
+      display: 'inline',
+      margin: '0 auto'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("li", null, "Header"), /*#__PURE__*/React__default['default'].createElement("li", null, "Payload"), /*#__PURE__*/React__default['default'].createElement("li", null, "Signature"))), /*#__PURE__*/React__default['default'].createElement("p", null, "Therefore, a JWT typically looks like the following:", ' ', /*#__PURE__*/React__default['default'].createElement("code", null, "xxxxx.yyyyy.zzzzz")), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      lineHeight: '1.5rem'
+    }
+  }, "Please refer to the", ' ', /*#__PURE__*/React__default['default'].createElement("a", {
+    href: "https://www.npmjs.com/package/idmission-web-sdk#getting-started",
+    target: "_blank",
+    rel: "noreferrer"
+  }, "Getting Started"), ' ', "section of the documentation for information on how to use your credentials to generate a valid", ' ', /*#__PURE__*/React__default['default'].createElement("a", {
+    href: "https://jwt.io",
+    target: "_blank",
+    rel: "noreferrer"
+  }, "JSON Web Token"), ' ', "for your IDmission account. Every usage of the IDmission WebSDK must be authorized with a valid JWT from IDmission's servers.")));
+};
+
+var TokenInvalidSignatureErrorOverlay = function TokenInvalidSignatureErrorOverlay() {
+  return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, {
+    style: {
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("h3", {
+    style: {
+      marginBottom: 8
+    }
+  }, "IDmission WebSDK failed to load"), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      marginBottom: 0
+    }
+  }, "Required property ", /*#__PURE__*/React__default['default'].createElement("code", null, "submissionToken"), " could not be validated."), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      marginBottom: 0,
+      lineHeight: '1.5rem'
+    }
+  }, "The signature of your token could not be validated. Check your token generation routine, it's possible that some malicious behavior is at play. This can also happen if you attempt to manually modify your token before passing it to the IDmission WebSDK."), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      marginBottom: 0,
+      lineHeight: '1.5rem'
+    }
+  }, "If you believe you have reached this page in error, please contact us at ", /*#__PURE__*/React__default['default'].createElement("a", {
+    href: "mailto:support@idmission.com"
+  }, "support@idmission.com"), ".")));
+};
+
+var TokenExpiredErrorOverlay = function TokenExpiredErrorOverlay() {
+  return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, {
+    style: {
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("h3", {
+    style: {
+      marginBottom: 8
+    }
+  }, "IDmission WebSDK failed to load"), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      marginBottom: 0
+    }
+  }, "Required property ", /*#__PURE__*/React__default['default'].createElement("code", null, "submissionToken"), " is expired."), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      marginBottom: 0,
+      lineHeight: '1.5rem'
+    }
+  }, "Ensure you are generating a fresh token for each request to the IDmission WebSDK."), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      lineHeight: '1.5rem'
+    }
+  }, "Please refer to the", ' ', /*#__PURE__*/React__default['default'].createElement("a", {
+    href: "https://www.npmjs.com/package/idmission-web-sdk#getting-started",
+    target: "_blank",
+    rel: "noreferrer"
+  }, "Getting Started"), ' ', "section of the documentation for information on how to use your credentials to generate a valid", ' ', /*#__PURE__*/React__default['default'].createElement("a", {
+    href: "https://jwt.io",
+    target: "_blank",
+    rel: "noreferrer"
+  }, "JSON Web Token"), ' ', "for your IDmission account. Every usage of the IDmission WebSDK must be authorized with a valid JWT from IDmission's servers.")));
+};
+
+var TokenPublicKeyErrorOverlay = function TokenPublicKeyErrorOverlay(_a) {
+  var error = _a.error;
+  return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, {
+    style: {
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("h3", {
+    style: {
+      marginBottom: 8
+    }
+  }, "IDmission WebSDK failed to load"), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      marginBottom: 0
+    }
+  }, (error === null || error === void 0 ? void 0 : error.host) ? ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "Failed to reach ", /*#__PURE__*/React__default['default'].createElement("code", null, error.host), ".")) : ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, "Failed to obtain public key for ", /*#__PURE__*/React__default['default'].createElement("code", null, "submissionToken"), "."))), (error === null || error === void 0 ? void 0 : error.message) && ( /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      marginBottom: 0,
+      lineHeight: '1.5rem'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("code", null, error.message))), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      marginBottom: 0,
+      lineHeight: '1.5rem'
+    }
+  }, "Please ensure that IDmission's servers can be reached. If you believe you have reached this page in error, please contact us at", ' ', /*#__PURE__*/React__default['default'].createElement("a", {
+    href: "mailto:support@idmission.com"
+  }, "support@idmission.com"), ".")));
+};
+
 var SubmissionProvider = function SubmissionProvider(_a) {
   var action = _a.action,
     children = _a.children,
@@ -933,6 +1099,64 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     setSubmissionStatus(SubmissionStatus.READY);
     retrySubmission();
   }, [retrySubmission]);
+  var _13 = React.useState('NOT_PARSED'),
+    tokenState = _13[0],
+    setTokenState = _13[1];
+  var _14 = React.useState(null),
+    tokenError = _14[0],
+    setTokenError = _14[1];
+  React.useEffect(function () {
+    (function () {
+      return tslib.__awaiter(void 0, void 0, void 0, function () {
+        var parsed, iss, publicKey, resp, e_3, valid, exp;
+        return tslib.__generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              setTokenState('PARSING');
+              if (!token) return [2 /*return*/, setTokenState('MISSING')];
+              try {
+                parsed = parseJwt(token);
+              } catch (e) {
+                console.error('error parsing token', e);
+                return [2 /*return*/, setTokenState('INVALID_FORMAT')];
+              }
+              iss = parsed.iss;
+              _a.label = 1;
+            case 1:
+              _a.trys.push([1, 3,, 4]);
+              return [4 /*yield*/, fetch(iss).then(function (r) {
+                return r.json();
+              })];
+            case 2:
+              resp = _a.sent();
+              publicKey = jsrsasign.KEYUTIL.getKey("-----BEGIN PUBLIC KEY-----\n".concat(resp.public_key, "\n-----END PUBLIC KEY-----"));
+              return [3 /*break*/, 4];
+            case 3:
+              e_3 = _a.sent();
+              console.error('error fetching public key', e_3);
+              setTokenError(new TokenPublicKeyError(e_3, iss));
+              return [2 /*return*/, setTokenState('PUBLIC_KEY_LOAD_FAILED')];
+            case 4:
+              valid = false;
+              try {
+                valid = jsrsasign.KJUR.jws.JWS.verifyJWT(token, publicKey, {
+                  alg: ['RS256']
+                });
+              } catch (e) {
+                console.error('error validating token', e);
+              }
+              if (!valid) return [2 /*return*/, setTokenState('INVALID_SIGNATURE')];
+              exp = parsed.exp;
+              if (Date.now() >= exp * 1000) {
+                return [2 /*return*/, setTokenState('EXPIRED')];
+              }
+              setTokenState('GOOD');
+              return [2 /*return*/];
+          }
+        });
+      });
+    })();
+  }, [token]);
   var value = {
     submit: submit,
     submissionStatus: submissionStatus,
@@ -963,6 +1187,23 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     checkLiveness: checkLiveness,
     retryLocationAccess: retryLocationAccess
   };
+  if (tokenState === 'MISSING') {
+    return /*#__PURE__*/React__default['default'].createElement(TokenMissingErrorOverlay, null);
+  }
+  if (tokenState === 'INVALID_FORMAT') {
+    return /*#__PURE__*/React__default['default'].createElement(TokenInvalidFormatErrorOverlay, null);
+  }
+  if (tokenState === 'INVALID_SIGNATURE') {
+    return /*#__PURE__*/React__default['default'].createElement(TokenInvalidSignatureErrorOverlay, null);
+  }
+  if (tokenState === 'EXPIRED') {
+    return /*#__PURE__*/React__default['default'].createElement(TokenExpiredErrorOverlay, null);
+  }
+  if (tokenState === 'PUBLIC_KEY_LOAD_FAILED') {
+    return /*#__PURE__*/React__default['default'].createElement(TokenPublicKeyErrorOverlay, {
+      error: tokenError
+    });
+  }
   return /*#__PURE__*/React__default['default'].createElement(SubmissionContext.Provider, {
     value: value
   }, geolocationRequired && geolocationBlocked ? ( /*#__PURE__*/React__default['default'].createElement(GeolocationAccessDeniedOverlay, null)) : children, submissionError && ( /*#__PURE__*/React__default['default'].createElement(SubmissionErrorOverlay, {
@@ -9167,7 +9408,8 @@ var IdCaptureImagePreview = function IdCaptureImagePreview(_a) {
   })));
 };
 var SelfieProgressPreview = function SelfieProgressPreview(_a) {
-  var imageUrl = _a.imageUrl;
+  var text = _a.text,
+    imageUrl = _a.imageUrl;
   return /*#__PURE__*/React__default['default'].createElement(ImagePreviewWrapper, null, /*#__PURE__*/React__default['default'].createElement(ImagePreviewText, null, /*#__PURE__*/React__default['default'].createElement(Spinner, {
     "$size": 24,
     "$color": "white",
@@ -9178,13 +9420,13 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
       left: -3,
       margin: '0 3px 0 -12px'
     }
-  }), "Processing..."), /*#__PURE__*/React__default['default'].createElement(ImagePreviewImageWrapper, null, /*#__PURE__*/React__default['default'].createElement("img", {
+  }), text), /*#__PURE__*/React__default['default'].createElement(ImagePreviewImageWrapper, null, /*#__PURE__*/React__default['default'].createElement("img", {
     src: imageUrl,
     alt: ""
   })));
 };
 var ImagePreviewWrapper = styled__default['default'].div(templateObject_1$5 || (templateObject_1$5 = tslib.__makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"], ["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"])));
-var ImagePreviewText = styled__default['default'].div(templateObject_2$2 || (templateObject_2$2 = tslib.__makeTemplateObject(["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"], ["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"])));
+var ImagePreviewText = styled__default['default'].div(templateObject_2$2 || (templateObject_2$2 = tslib.__makeTemplateObject(["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font: 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,\n    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"], ["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font: 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,\n    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"])));
 var ImagePreviewImageWrapper = styled__default['default'].div(templateObject_3$1 || (templateObject_3$1 = tslib.__makeTemplateObject(["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"], ["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"])));
 var templateObject_1$5, templateObject_2$2, templateObject_3$1;
 
@@ -9198,6 +9440,7 @@ var esTranslation = {
   'Camera access blocked': 'Acceso bloqueado a la cámara',
   'Location access blocked': 'Acceso bloqueado a la localización',
   Continue: 'Continuar',
+  'Processing...': 'Procesando...',
   'Your camera permission is disabled': 'El permiso de la cámara está desactivado',
   'This application requires access to your camera to continue. Please accept the permission once prompted by the browser. If the browser does not prompt for camera permissions, you must go to settings and provide camera access to the current browser.': 'Esta aplicación requiere el acceso a la cámara para continuar. Hay que aceptar el permiso una vez que se muestre la ventana en el explorador. Si no aparece la ventana para otorgar permisos, entonces hay que dirigirse a Configuración y otorgar el permiso a la cámara en el explorador actual.',
   'Your location permission is disabled': 'El permiso de la localización está desactivado',
@@ -11453,27 +11696,28 @@ var reducer$2 = function reducer(state, action) {
   }
 };
 var FaceLivenessCapture = function FaceLivenessCapture(_a) {
+  var _b;
   var onCapture = _a.onCapture,
     onSuccess = _a.onSuccess,
     onTimeout = _a.onTimeout,
     onExit = _a.onExit,
-    _b = _a.timeoutDurationMs,
-    timeoutDurationMs = _b === void 0 ? 15000 : _b,
-    _c = _a.colors,
-    colors = _c === void 0 ? {} : _c,
-    _d = _a.verbiage,
-    rawVerbiage = _d === void 0 ? {} : _d,
+    _c = _a.timeoutDurationMs,
+    timeoutDurationMs = _c === void 0 ? 15000 : _c,
+    _d = _a.colors,
+    colors = _d === void 0 ? {} : _d,
+    _e = _a.verbiage,
+    rawVerbiage = _e === void 0 ? {} : _e,
     debugMode = _a.debugMode;
-  var _e = React.useContext(SubmissionContext),
-    checkLiveness = _e.checkLiveness,
-    submissionError = _e.submissionError;
+  var _f = React.useContext(SubmissionContext),
+    checkLiveness = _f.checkLiveness,
+    submissionError = _f.submissionError;
   var modelsError = React.useContext(HighPerformanceSelfieGuidanceModelsContext).error;
-  var _f = React.useReducer(reducer$2, initialState$2),
-    state = _f[0],
-    dispatch = _f[1];
-  var _g = React.useState(null),
-    imageUrl = _g[0],
-    setImageUrl = _g[1];
+  var _g = React.useReducer(reducer$2, initialState$2),
+    state = _g[0],
+    dispatch = _g[1];
+  var _h = React.useState(null),
+    imageUrl = _h[0],
+    setImageUrl = _h[1];
   var rawCanvas = React.useRef(null);
   var cropCanvas = React.useRef(null);
   var onSelfieCaptured = React.useCallback(function (frame, face) {
@@ -11590,7 +11834,8 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
   var verbiage = useTranslations(rawVerbiage, {
     guidanceRemoveEyeCoveringsText: 'Please remove your eye coverings (sunglasses, eye patch, etc.)...',
     guidanceRemoveHeadCoveringsText: 'Please remove your head coverings (hat, scarf, etc.)...',
-    guidanceRemoveMaskText: 'Please remove your mask...'
+    guidanceRemoveMaskText: 'Please remove your mask...',
+    progressPreviewText: 'Processing...'
   });
   var guidanceMessage = state.eyeCoveringDetected ? verbiage.guidanceRemoveEyeCoveringsText : state.headCoveringDetected ? verbiage.guidanceRemoveHeadCoveringsText : state.maskDetected ? verbiage.guidanceRemoveMaskText : undefined;
   if (modelsError) {
@@ -11611,9 +11856,10 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
     colors: colors,
     verbiage: verbiage,
     debugMode: debugMode
-  }), imageUrl && /*#__PURE__*/React__default['default'].createElement(SelfieProgressPreview, {
-    imageUrl: imageUrl
-  }));
+  }), imageUrl && ( /*#__PURE__*/React__default['default'].createElement(SelfieProgressPreview, {
+    imageUrl: imageUrl,
+    text: (_b = verbiage.progressPreviewText) !== null && _b !== void 0 ? _b : ''
+  })));
 };
 
 var SelfieCaptureLoadingOverlay = function SelfieCaptureLoadingOverlay(_a) {
@@ -13508,6 +13754,7 @@ var CustomerVerificationCapture = function CustomerVerificationCapture(_a) {
     }
   }, [onCustomerMatched, onCustomerNotMatched, state.requestState, submissionRequest, submissionResponse]);
   useTimeout(captureGuidanceTimeoutDurationMs, onCaptureGuidanceTimeout, ['VERIFIED', 'REJECTED'].includes(state.requestState), state.requestState === 'VERIFYING');
+  var progressPreviewText = useVerbiage(verbiage.progressPreviewText, 'Processing...');
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
     ref: rawCanvas
   }), /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
@@ -13519,9 +13766,10 @@ var CustomerVerificationCapture = function CustomerVerificationCapture(_a) {
     colors: colors,
     verbiage: verbiage,
     debugMode: debugMode
-  }), imageUrl && /*#__PURE__*/React__default['default'].createElement(SelfieProgressPreview, {
-    imageUrl: imageUrl
-  }));
+  }), imageUrl && ( /*#__PURE__*/React__default['default'].createElement(SelfieProgressPreview, {
+    imageUrl: imageUrl,
+    text: progressPreviewText
+  })));
 };
 
 var CustomerVerificationSuccess = function CustomerVerificationSuccess(_a) {
@@ -13979,6 +14227,7 @@ var CustomerIdentificationCapture = function CustomerIdentificationCapture(_a) {
     }
   }, [onCustomerMatched, onCustomerNotMatched, state.requestState, submissionRequest, submissionResponse]);
   useTimeout(captureGuidanceTimeoutDurationMs, onCaptureGuidanceTimeout, ['FOUND', 'NOT_FOUND'].includes(state.requestState), state.requestState === 'IDENTIFYING');
+  var progressPreviewText = useVerbiage(verbiage.progressPreviewText, 'Processing...');
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
     ref: rawCanvas
   }), /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
@@ -13990,9 +14239,10 @@ var CustomerIdentificationCapture = function CustomerIdentificationCapture(_a) {
     colors: colors,
     verbiage: verbiage,
     debugMode: debugMode
-  }), imageUrl && /*#__PURE__*/React__default['default'].createElement(SelfieProgressPreview, {
+  }), imageUrl && ( /*#__PURE__*/React__default['default'].createElement(SelfieProgressPreview, {
+    text: progressPreviewText,
     imageUrl: imageUrl
-  }));
+  })));
 };
 
 var CustomerIdentificationSuccess = function CustomerIdentificationSuccess(_a) {