idmission-web-sdk 0.0.84 → 0.0.86

package/dist/components/submission/{SubmissionError.d.ts → Errors.d.ts}

@@ -3,3 +3,5 @@ export declare class SubmissionError extends Error {
     status: SubmissionResponseStatus;
     constructor(status: SubmissionResponseStatus);
 }
+export declare class NetworkError extends Error {
+}

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

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
-import { SubmissionError } from './SubmissionError';
+import { NetworkError, SubmissionError } from './Errors';
 export type SubmissionErrorOverlayProps = {
-    submissionError: SubmissionError;
+    error: SubmissionError | NetworkError;
+    onRetry?: () => void;
 };
-export declare const SubmissionErrorOverlay: ({ submissionError, }: SubmissionErrorOverlayProps) => ReactElement;
+export declare const SubmissionErrorOverlay: ({ error, onRetry, }: SubmissionErrorOverlayProps) => ReactElement;

package/dist/contexts/SubmissionContext.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { UploadedDocument } from '../components/additional_document_capture/AdditionalDocumentCapture';
 import { SignatureData } from '../components/signature_capture/data';
+import { NetworkError, SubmissionError } from '../components/submission/Errors';
 export declare enum SubmissionAction {
     NONE = "NONE",
     ENROLL = "ENROLL",
@@ -153,6 +154,7 @@ export type SubmissionState = {
     submissionStatus: SubmissionStatus;
     submissionRequest: SubmissionRequest | null;
     submissionResponse: SubmissionResponse | null;
+    submissionError: SubmissionError | NetworkError | null;
     submissionEnvironment: SubmissionEnvironment;
     idFrontImage: string | null;
     idBackImage: string | null;

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

@@ -48,5 +48,8 @@ declare const _default: {
     Accept: string;
     Clear: string;
     'Video signature has been successfully captured!': string;
+    'Network unreachable': string;
+    "We're having trouble reaching our services, please check your connection and try again.": string;
+    "We're sorry, an unexpected error has occurred.": string;
 };
 export default _default;

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

@@ -56,6 +56,9 @@ export declare const resources: {
             Accept: string;
             Clear: string;
             'Video signature has been successfully captured!': string;
+            'Network unreachable': string;
+            "We're having trouble reaching our services, please check your connection and try again.": string;
+            "We're sorry, an unexpected error has occurred.": string;
         };
     };
 };

package/dist/sdk2.cjs.development.js

@@ -50,7 +50,7 @@ var tf__namespace = /*#__PURE__*/_interopNamespace(tf);
 var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObserver);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '0.0.84';
+var webSdkVersion = '0.0.86';
 
 function getPlatform() {
   return window.platform;
@@ -86,6 +86,7 @@ var SubmissionContext = /*#__PURE__*/React.createContext({
   submissionStatus: SubmissionStatus.READY,
   submissionRequest: null,
   submissionResponse: null,
+  submissionError: null,
   submissionEnvironment: 'prod',
   idFrontImage: null,
   idBackImage: null,
@@ -378,40 +379,85 @@ var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a)
   }, t('Retry')))));
 };
 
+var SubmissionError = function (_super) {
+  tslib.__extends(SubmissionError, _super);
+  function SubmissionError(status) {
+    var _this = _super.call(this, status.statusMessage) || this;
+    _this.status = status;
+    return _this;
+  }
+  return SubmissionError;
+}(Error);
+var NetworkError = function (_super) {
+  tslib.__extends(NetworkError, _super);
+  function NetworkError() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  return NetworkError;
+}(Error);
+
 var SubmissionErrorOverlay = function SubmissionErrorOverlay(_a) {
-  var submissionError = _a.submissionError;
+  var error = _a.error,
+    onRetry = _a.onRetry;
   return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, {
     style: {
       justifyContent: 'center'
     }
-  }, /*#__PURE__*/React__default['default'].createElement("h3", {
+  }, error instanceof NetworkError ? /*#__PURE__*/React__default['default'].createElement(NetworkErrorContent, {
+    error: error,
+    onRetry: onRetry
+  }) : /*#__PURE__*/React__default['default'].createElement(SubmissionErrorContent, {
+    error: error
+  })));
+};
+var SubmissionErrorContent = function SubmissionErrorContent(_a) {
+  var error = _a.error;
+  var t = reactI18next.useTranslation().t;
+  var headingText = t("We're sorry, an unexpected error has occurred.");
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("h3", {
     style: {
       marginBottom: 8
     }
-  }, "We're sorry, an unexpected error has occurred."), submissionError.status.statusCode && /*#__PURE__*/React__default['default'].createElement("p", {
+  }, headingText), error.status.statusCode && /*#__PURE__*/React__default['default'].createElement("p", {
     style: {
       marginBottom: 0
     }
-  }, /*#__PURE__*/React__default['default'].createElement("code", null, "Status: ", submissionError.status.statusCode)), /*#__PURE__*/React__default['default'].createElement("p", {
+  }, /*#__PURE__*/React__default['default'].createElement("code", null, "Status: ", error.status.statusCode)), /*#__PURE__*/React__default['default'].createElement("p", {
     style: {
       marginBottom: 0
     }
-  }, /*#__PURE__*/React__default['default'].createElement("code", null, submissionError.message)), submissionError.status.errorData && /*#__PURE__*/React__default['default'].createElement("p", {
+  }, /*#__PURE__*/React__default['default'].createElement("code", null, error.message)), error.status.errorData && /*#__PURE__*/React__default['default'].createElement("p", {
     style: {
       marginBottom: 0
     }
-  }, /*#__PURE__*/React__default['default'].createElement("code", null, submissionError.status.errorData))));
+  }, /*#__PURE__*/React__default['default'].createElement("code", null, error.status.errorData)));
+};
+var NetworkErrorContent = function NetworkErrorContent(_a) {
+  var onRetry = _a.onRetry;
+  var t = reactI18next.useTranslation().t;
+  var headingText = t('Network unreachable');
+  var messageText = t("We're having trouble reaching our services, please check your connection and try again.");
+  var retryText = t('Retry');
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("h3", {
+    style: {
+      marginBottom: 8
+    }
+  }, headingText), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      marginBottom: 0
+    }
+  }, messageText), onRetry && /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      marginTop: 32
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
+    colors: {
+      backgroundColor: '#ea8557'
+    },
+    finished: true,
+    onClick: onRetry
+  }, retryText)));
 };
-
-var SubmissionError = function (_super) {
-  tslib.__extends(SubmissionError, _super);
-  function SubmissionError(status) {
-    var _this = _super.call(this, status.statusMessage) || this;
-    _this.status = status;
-    return _this;
-  }
-  return SubmissionError;
-}(Error);
 
 var SubmissionProvider = function SubmissionProvider(_a) {
   var action = _a.action,
@@ -457,44 +503,47 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     submissionError = _p[0],
     setSubmissionError = _p[1];
   var _q = React.useState(null),
-    idFrontImage = _q[0],
-    setIdFrontImage = _q[1];
+    retrySubmission = _q[0],
+    setRetrySubmission = _q[1];
   var _r = React.useState(null),
-    idBackImage = _r[0],
-    setIdBackImage = _r[1];
+    idFrontImage = _r[0],
+    setIdFrontImage = _r[1];
   var _s = React.useState(null),
-    passportImage = _s[0],
-    setPassportImage = _s[1];
+    idBackImage = _s[0],
+    setIdBackImage = _s[1];
   var _t = React.useState(null),
-    selfieImage = _t[0],
-    setSelfieImage = _t[1];
+    passportImage = _t[0],
+    setPassportImage = _t[1];
   var _u = React.useState(null),
-    signatureData = _u[0],
-    setSignatureData = _u[1];
+    selfieImage = _u[0],
+    setSelfieImage = _u[1];
   var _v = React.useState(null),
-    signatureVideo = _v[0],
-    setSignatureVideo = _v[1];
+    signatureData = _v[0],
+    setSignatureData = _v[1];
   var _w = React.useState(null),
-    additionalDocuments = _w[0],
-    setAdditionalDocuments = _w[1];
+    signatureVideo = _w[0],
+    setSignatureVideo = _w[1];
   var _x = React.useState(null),
-    geolocationResult = _x[0],
-    setGeolocationResult = _x[1];
-  var _y = React.useState(0),
-    geolocationAttempts = _y[0],
-    setGeolocationAttempts = _y[1];
-  var _z = React.useState(false),
-    geolocationBlocked = _z[0],
-    setGeolocationBlocked = _z[1];
-  var _0 = React.useState([]),
-    idFrontCaptureAttempts = _0[0],
-    setIdFrontCaptureAttempts = _0[1];
+    additionalDocuments = _x[0],
+    setAdditionalDocuments = _x[1];
+  var _y = React.useState(null),
+    geolocationResult = _y[0],
+    setGeolocationResult = _y[1];
+  var _z = React.useState(0),
+    geolocationAttempts = _z[0],
+    setGeolocationAttempts = _z[1];
+  var _0 = React.useState(false),
+    geolocationBlocked = _0[0],
+    setGeolocationBlocked = _0[1];
   var _1 = React.useState([]),
-    idBackCaptureAttempts = _1[0],
-    setIdBackCaptureAttempts = _1[1];
+    idFrontCaptureAttempts = _1[0],
+    setIdFrontCaptureAttempts = _1[1];
   var _2 = React.useState([]),
-    selfieCaptureAttempts = _2[0],
-    setSelfieCaptureAttempts = _2[1];
+    idBackCaptureAttempts = _2[0],
+    setIdBackCaptureAttempts = _2[1];
+  var _3 = React.useState([]),
+    selfieCaptureAttempts = _3[0],
+    setSelfieCaptureAttempts = _3[1];
   var logIdFrontCaptureAttempt = React.useCallback(function (attempt) {
     setIdFrontCaptureAttempts(function (attempts) {
       return tslib.__spreadArray(tslib.__spreadArray([], attempts, true), [attempt], false);
@@ -514,9 +563,10 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     return tslib.__awaiter(void 0, void 0, void 0, function () {
       var submissionResponse_1, submissionRequest_1, onBeforeSubmitResult, host, endpoint, response, _a, submissionResponse_2, e_1, err;
       var _b;
-      var _c;
-      return tslib.__generator(this, function (_d) {
-        switch (_d.label) {
+      var _c, _d;
+      var _e;
+      return tslib.__generator(this, function (_f) {
+        switch (_f.label) {
           case 0:
             if (action === SubmissionAction.NONE) {
               submissionResponse_1 = {
@@ -530,9 +580,9 @@ var SubmissionProvider = function SubmissionProvider(_a) {
               return [2, submissionResponse_1];
             }
             setSubmissionStatus(SubmissionStatus.SUBMITTING);
-            _d.label = 1;
+            _f.label = 1;
           case 1:
-            _d.trys.push([1, 8,, 9]);
+            _f.trys.push([1, 8,, 9]);
             submissionRequest_1 = {
               securityData: {
                 userName: '',
@@ -595,7 +645,7 @@ var SubmissionProvider = function SubmissionProvider(_a) {
               submissionRequest_1.customerData.cardData = cardData;
             }
             if (enrollmentId) {
-              (_c = submissionRequest_1.customerData).personalData || (_c.personalData = {});
+              (_e = submissionRequest_1.customerData).personalData || (_e.personalData = {});
               submissionRequest_1.customerData.personalData.uniqueNumber = enrollmentId;
             }
             if (webhooksClientTraceId) {
@@ -624,9 +674,9 @@ var SubmissionProvider = function SubmissionProvider(_a) {
             if (!onBeforeSubmit) return [3, 3];
             return [4, onBeforeSubmit(submissionRequest_1)];
           case 2:
-            onBeforeSubmitResult = _d.sent();
+            onBeforeSubmitResult = _f.sent();
             if (onBeforeSubmitResult) submissionRequest_1 = onBeforeSubmitResult;
-            _d.label = 3;
+            _f.label = 3;
           case 3:
             host = url || determineSubmissionHost(environment, token);
             endpoint = determineSubmissionEndpoint(action, !!(idFrontImage || idBackImage || passportImage), !!selfieImage, !!token);
@@ -634,21 +684,23 @@ var SubmissionProvider = function SubmissionProvider(_a) {
               method: 'POST',
               headers: apiHeaders(token),
               body: JSON.stringify(submissionRequest_1)
+            })["catch"](function (e) {
+              throw new NetworkError(e.message);
             })];
           case 4:
-            response = _d.sent();
-            if (!!response.ok) return [3, 6];
+            response = _f.sent();
+            if (!(!response || !response.ok)) return [3, 6];
             _a = SubmissionError.bind;
             _b = {
-              statusCode: response.statusText
+              statusCode: (_c = response === null || response === void 0 ? void 0 : response.statusText) !== null && _c !== void 0 ? _c : '???'
             };
-            return [4, response.text()];
+            return [4, response === null || response === void 0 ? void 0 : response.text()];
           case 5:
-            throw new (_a.apply(SubmissionError, [void 0, (_b.statusMessage = _d.sent(), _b)]))();
+            throw new (_a.apply(SubmissionError, [void 0, (_b.statusMessage = (_d = _f.sent()) !== null && _d !== void 0 ? _d : 'No response was received', _b)]))();
           case 6:
             return [4, response.json()];
           case 7:
-            submissionResponse_2 = _d.sent();
+            submissionResponse_2 = _f.sent();
             if (submissionResponse_2.status.statusCode !== '000') {
               throw new SubmissionError(submissionResponse_2.status);
             }
@@ -658,13 +710,18 @@ var SubmissionProvider = function SubmissionProvider(_a) {
             onResponseReceived === null || onResponseReceived === void 0 ? void 0 : onResponseReceived(submissionResponse_2);
             return [2, submissionResponse_2];
           case 8:
-            e_1 = _d.sent();
+            e_1 = _f.sent();
             err = e_1;
             setSubmissionStatus(SubmissionStatus.FAILED);
-            setSubmissionError(e_1 instanceof SubmissionError ? e_1 : new SubmissionError({
+            setSubmissionError(e_1 instanceof SubmissionError || e_1 instanceof NetworkError ? e_1 : new SubmissionError({
               statusCode: '',
               statusMessage: err.message
             }));
+            setRetrySubmission(function () {
+              return ['VERIFY', 'IDENTIFY'].includes(action) ? function () {
+                return null;
+              } : submit;
+            });
             onRequestFailure === null || onRequestFailure === void 0 ? void 0 : onRequestFailure(err);
             throw err;
           case 9:
@@ -710,6 +767,8 @@ var SubmissionProvider = function SubmissionProvider(_a) {
               method: 'POST',
               headers: apiHeaders(token),
               body: JSON.stringify(request)
+            })["catch"](function (e) {
+              throw new NetworkError(e.message);
             })];
           case 2:
             response = _f.sent();
@@ -734,10 +793,15 @@ var SubmissionProvider = function SubmissionProvider(_a) {
             e_2 = _f.sent();
             err = e_2;
             setSubmissionStatus(SubmissionStatus.FAILED);
-            setSubmissionError(e_2 instanceof SubmissionError ? e_2 : new SubmissionError({
+            setSubmissionError(e_2 instanceof SubmissionError || e_2 instanceof NetworkError ? e_2 : new SubmissionError({
               statusCode: '',
               statusMessage: err.message
             }));
+            setRetrySubmission(function () {
+              return function () {
+                return null;
+              };
+            });
             onRequestFailure === null || onRequestFailure === void 0 ? void 0 : onRequestFailure(err);
             throw err;
           case 7:
@@ -765,11 +829,18 @@ var SubmissionProvider = function SubmissionProvider(_a) {
       }
     });
   }, [geolocationAttempts, geolocationEnabled, geolocationRequired]);
+  var onRetry = React.useCallback(function () {
+    if (!retrySubmission) return;
+    setSubmissionError(null);
+    setSubmissionStatus(SubmissionStatus.READY);
+    retrySubmission();
+  }, [retrySubmission]);
   var value = {
     submit: submit,
     submissionStatus: submissionStatus,
     submissionRequest: submissionRequest,
     submissionResponse: submissionResponse,
+    submissionError: submissionError,
     submissionEnvironment: environment,
     idFrontImage: idFrontImage,
     idBackImage: idBackImage,
@@ -793,9 +864,10 @@ var SubmissionProvider = function SubmissionProvider(_a) {
   };
   return /*#__PURE__*/React__default['default'].createElement(SubmissionContext.Provider, {
     value: value
-  }, geolocationRequired && geolocationBlocked ? /*#__PURE__*/React__default['default'].createElement(GeolocationAccessDeniedOverlay, null) : submissionError ? /*#__PURE__*/React__default['default'].createElement(SubmissionErrorOverlay, {
-    submissionError: submissionError
-  }) : children);
+  }, geolocationRequired && geolocationBlocked ? /*#__PURE__*/React__default['default'].createElement(GeolocationAccessDeniedOverlay, null) : children, submissionError && /*#__PURE__*/React__default['default'].createElement(SubmissionErrorOverlay, {
+    error: submissionError,
+    onRetry: onRetry
+  }));
 };
 
 var DocumentType;
@@ -9048,7 +9120,10 @@ var esTranslation = {
   'Please sign the box below': 'Por favor, hay que firmar en el recuadro de abajo',
   Accept: 'Aceptar',
   Clear: 'Borrar',
-  'Video signature has been successfully captured!': 'La video firma ha sido exitosa.'
+  'Video signature has been successfully captured!': 'La video firma ha sido exitosa.',
+  'Network unreachable': 'No hay conexión a internet.',
+  "We're having trouble reaching our services, please check your connection and try again.": "Estamos teniendo problemas para alcanzar nuestros servicios, por favor verificar la conexi\xF3n a internet e intentar de nuevo.",
+  "We're sorry, an unexpected error has occurred.": "Lo sentimos, se ha producido un error inesperado."
 };
 
 var resources = {
@@ -11039,13 +11114,15 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
     _d = _a.verbiage,
     rawVerbiage = _d === void 0 ? {} : _d,
     debugMode = _a.debugMode;
-  var checkLiveness = React.useContext(SubmissionContext).checkLiveness;
-  var _e = React.useReducer(reducer$2, initialState$2),
-    state = _e[0],
-    dispatch = _e[1];
-  var _f = React.useState(null),
-    imageUrl = _f[0],
-    setImageUrl = _f[1];
+  var _e = React.useContext(SubmissionContext),
+    checkLiveness = _e.checkLiveness,
+    submissionError = _e.submissionError;
+  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 onSelfieCaptured = React.useCallback(function (frame, face) {
     onCapture === null || onCapture === void 0 ? void 0 : onCapture();
     dispatch({
@@ -11061,7 +11138,7 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
   var isReady = state.requestState === 'CAPTURED';
   var isPassed = state.requestState === 'PASSED';
   React.useEffect(function () {
-    if (!frame || !face || !isReady) return;
+    if (!frame || !face || !isReady || submissionError) return;
     dispatch({
       type: 'livenessChecking'
     });
@@ -11105,7 +11182,7 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
         });
       });
     })();
-  }, [checkLiveness, face, frame, isReady]);
+  }, [checkLiveness, face, frame, isReady, submissionError]);
   React.useEffect(function () {
     if (isPassed && state.imageUrl) onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(state.imageUrl);
   }, [onSuccess, state.imageUrl, isPassed]);
@@ -12880,6 +12957,7 @@ var CustomerVerificationCapture = function CustomerVerificationCapture(_a) {
   var _f = React.useContext(SubmissionContext),
     submit = _f.submit,
     submissionResponse = _f.submissionResponse,
+    submissionError = _f.submissionError,
     selfieImage = _f.selfieImage,
     setSelfieImage = _f.setSelfieImage;
   var _g = React.useState(null),
@@ -12896,15 +12974,15 @@ var CustomerVerificationCapture = function CustomerVerificationCapture(_a) {
   }, []);
   var isReady = state.requestState === 'CAPTURED';
   React.useEffect(function () {
-    if (!frame || !face) return;
+    if (!frame || !face || submissionError) return;
     var imageUrl = cropToShoulders(frame, face);
     setImageUrl(imageUrl);
     dataUrlToBase64(imageUrl).then(function (img) {
       setSelfieImage(img);
     });
-  }, [face, frame, setSelfieImage]);
+  }, [face, frame, setSelfieImage, submissionError]);
   React.useEffect(function () {
-    if (!isReady || !selfieImage) return;
+    if (!isReady || !selfieImage || submissionError) return;
     (function () {
       return tslib.__awaiter(void 0, void 0, void 0, function () {
         var submissionResponse_1, e_1;
@@ -12944,7 +13022,7 @@ var CustomerVerificationCapture = function CustomerVerificationCapture(_a) {
         });
       });
     })();
-  }, [isReady, onCustomerMatched, onCustomerNotMatched, selfieImage, state.requestState, submit]);
+  }, [isReady, onCustomerMatched, onCustomerNotMatched, selfieImage, state.requestState, submissionError, submit]);
   React.useEffect(function () {
     if (!submissionResponse) return;
     if (state.requestState === 'VERIFIED') {