idmission-web-sdk 1.0.148 → 1.0.149

package/dist/components/document_capture/DocumentCaptureScreen.d.ts

@@ -2,7 +2,20 @@ import React, { ReactNode } from 'react';
 import { CameraFeedMode } from '../../lib/camera/CameraFeedWrapper';
 export type DocumentCaptureScreenClassNames = {
     container?: string;
+    cameraFeedWrapper?: string;
     cameraFeed?: string;
+    previewImage?: string;
+    captureContainer?: string;
+    headingRow?: string;
+    heading?: string;
+    footerRow?: string;
+    instructions?: string;
+    buttonsRow?: string;
+    retryCameraAccessBtn?: string;
+    retryCaptureBtn?: string;
+    uploadBtn?: string;
+    uploadProgressBtn?: string;
+    captureBtn?: string;
 };
 export type DocumentCaptureScreenProps = {
     aspectRatio?: number;

package/dist/sdk2.cjs.development.js

@@ -47,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.148';
+var webSdkVersion = '1.0.149';
 
 function getPlatform() {
   if (typeof window === 'undefined') return;
@@ -10385,12 +10385,12 @@ var ImagesContainer = styled__default['default'](OverlayImageContainer)(template
 var ImageRow = styled__default['default'](OverlayImageRow)(templateObject_4$7 || (templateObject_4$7 = tslib.__makeTemplateObject(["\n  flex-direction: column;\n"], ["\n  flex-direction: column;\n"])));
 var ImageCol$1 = styled__default['default'].div(templateObject_5$5 || (templateObject_5$5 = tslib.__makeTemplateObject(["\n  max-height: none !important;\n"], ["\n  max-height: none !important;\n"])));
 var ImageHeading = styled__default['default'].h3(templateObject_6$4 || (templateObject_6$4 = tslib.__makeTemplateObject(["\n  text-align: left;\n  margin-top: 24px;\n  margin-bottom: 8px;\n  font-size: 16px;\n  font-weight: normal;\n"], ["\n  text-align: left;\n  margin-top: 24px;\n  margin-bottom: 8px;\n  font-size: 16px;\n  font-weight: normal;\n"])));
-var CapturedImageWrapper = styled__default['default'].div(templateObject_7$1 || (templateObject_7$1 = tslib.__makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  border-radius: 6px;\n  padding: 4px;\n  background: white;\n  display: flex;\n"], ["\n  border: 1px solid\n    ", ";\n  border-radius: 6px;\n  padding: 4px;\n  background: white;\n  display: flex;\n"])), function (props) {
+var CapturedImageWrapper = styled__default['default'].div(templateObject_7$2 || (templateObject_7$2 = tslib.__makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  border-radius: 6px;\n  padding: 4px;\n  background: white;\n  display: flex;\n"], ["\n  border: 1px solid\n    ", ";\n  border-radius: 6px;\n  padding: 4px;\n  background: white;\n  display: flex;\n"])), function (props) {
   var _a, _b, _c;
   return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.success) === null || _b === void 0 ? void 0 : _b.imageBorderColor) !== null && _c !== void 0 ? _c : 'var(--idm-color-primary-400)';
 });
 var StyledImage = styled__default['default'](CapturedDocumentImg)(templateObject_8$1 || (templateObject_8$1 = tslib.__makeTemplateObject(["\n  width: 100%;\n  border-radius: 4px;\n"], ["\n  width: 100%;\n  border-radius: 4px;\n"])));
-var templateObject_1$o, templateObject_2$g, templateObject_3$b, templateObject_4$7, templateObject_5$5, templateObject_6$4, templateObject_7$1, templateObject_8$1;
+var templateObject_1$o, templateObject_2$g, templateObject_3$b, templateObject_4$7, templateObject_5$5, templateObject_6$4, templateObject_7$2, templateObject_8$1;
 
 var CameraVideoTag = function CameraVideoTag(_a) {
   var _b;
@@ -10629,7 +10629,7 @@ var GuideCenterBorder = styled__default['default'].div(templateObject_6$2 || (te
   var _a, _b;
   return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
 });
-var GuideText = styled__default['default'].span(templateObject_7 || (templateObject_7 = tslib.__makeTemplateObject(["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"], ["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"])));
+var GuideText = styled__default['default'].span(templateObject_7$1 || (templateObject_7$1 = tslib.__makeTemplateObject(["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"], ["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"])));
 var GuideImage = styled__default['default'].img(templateObject_8 || (templateObject_8 = tslib.__makeTemplateObject(["\n  display: block;\n  padding: ", "px;\n  box-sizing: border-box;\n  ", "\n  ", "\n"], ["\n  display: block;\n  padding: ", "px;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), function (props) {
   return props.$padding;
 }, function (props) {
@@ -10752,7 +10752,7 @@ var regionClsx$1 = function regionClsx(classNames, which) {
     return v;
   }).join(' ');
 };
-var templateObject_1$k, templateObject_2$e, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$2, templateObject_7, templateObject_8;
+var templateObject_1$k, templateObject_2$e, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$2, templateObject_7$1, templateObject_8;
 
 var FlippingImage = styled__default['default'](GuideImage)(templateObject_1$j || (templateObject_1$j = tslib.__makeTemplateObject(["\n  backface-visibility: hidden;\n  transform-style: preserve-3d;\n  position: relative;\n  top: 0;\n  left: 0;\n  transition: transform ", "s;\n  transform: ", ";\n"], ["\n  backface-visibility: hidden;\n  transform-style: preserve-3d;\n  position: relative;\n  top: 0;\n  left: 0;\n  transition: transform ", "s;\n  transform: ", ";\n"])), function (props) {
   return props.$transitionTime;
@@ -16987,29 +16987,30 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
   var aspectRatio = _a.aspectRatio,
     _f = _a.cameraFeedMode,
     cameraFeedMode = _f === void 0 ? 'snapToGuides' : _f,
-    classNames = _a.classNames,
+    _g = _a.classNames,
+    classNames = _g === void 0 ? {} : _g,
     instructions = _a.instructions,
     onCaptureClicked = _a.onCaptureClicked,
     onSuccess = _a.onSuccess;
-  var _g = React.useContext(SubmissionContext),
-    submit = _g.submit,
-    uploadDocument = _g.uploadDocument;
-  var _h = useDocumentCaptureState(),
-    _j = _h[0],
-    rectX = _j.rectX,
-    rectY = _j.rectY,
-    rectWidth = _j.rectWidth,
-    rectHeight = _j.rectHeight,
-    rectOffsetTop = _j.rectOffsetTop,
-    capturing = _j.capturing,
-    imageUrl = _j.imageUrl,
-    imageBlob = _j.imageBlob,
-    uploadState = _j.uploadState,
-    dispatch = _h[1];
-  var _k = React.useContext(CameraStateContext),
-    cameraReady = _k.cameraReady,
-    cameraAccessDenied = _k.cameraAccessDenied,
-    retryCameraAccess = _k.retryCameraAccess;
+  var _h = React.useContext(SubmissionContext),
+    submit = _h.submit,
+    uploadDocument = _h.uploadDocument;
+  var _j = useDocumentCaptureState(),
+    _k = _j[0],
+    rectX = _k.rectX,
+    rectY = _k.rectY,
+    rectWidth = _k.rectWidth,
+    rectHeight = _k.rectHeight,
+    rectOffsetTop = _k.rectOffsetTop,
+    capturing = _k.capturing,
+    imageUrl = _k.imageUrl,
+    imageBlob = _k.imageBlob,
+    uploadState = _k.uploadState,
+    dispatch = _j[1];
+  var _l = React.useContext(CameraStateContext),
+    cameraReady = _l.cameraReady,
+    cameraAccessDenied = _l.cameraAccessDenied,
+    retryCameraAccess = _l.retryCameraAccess;
   var theme = styled.useTheme();
   var maskColor = (_d = (_c = (_b = theme.documentCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.maskColor) !== null && _d !== void 0 ? _d : cameraFeedMode === 'snapToGuides' ? '#708090' : "rgba(0, 0, 0, 0.5)";
   function onCaptureClick() {
@@ -17051,36 +17052,45 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
     });
   }
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
-    className: "flex ".concat((_e = classNames === null || classNames === void 0 ? void 0 : classNames.container) !== null && _e !== void 0 ? _e : '')
+    className: "flex ".concat((_e = classNames.container) !== null && _e !== void 0 ? _e : '')
   }, /*#__PURE__*/React__default['default'].createElement(CameraFeedWrapper, {
+    className: classNames.cameraFeedWrapper,
     "$mode": cameraFeedMode,
     "$x": rectX,
     "$y": rectY + rectOffsetTop,
     "$w": rectWidth,
     "$h": rectHeight
-  }, imageUrl ? ( /*#__PURE__*/React__default['default'].createElement("img", {
+  }, imageUrl ? ( /*#__PURE__*/React__default['default'].createElement(PreviewImage, {
     alt: "",
     src: imageUrl,
-    style: {
-      width: '100%',
-      height: '100%',
-      objectFit: 'cover'
-    }
+    className: classNames.previewImage
   })) : ( /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, {
-    className: classNames === null || classNames === void 0 ? void 0 : classNames.cameraFeed
-  }))), /*#__PURE__*/React__default['default'].createElement(CaptureContainer, null, /*#__PURE__*/React__default['default'].createElement(HeadingRow, {
-    "$maskColor": maskColor
-  }, /*#__PURE__*/React__default['default'].createElement(Heading, null, "Comprobante de domicilio")), /*#__PURE__*/React__default['default'].createElement(DocumentCaptureGuideOverlay, {
+    className: classNames.cameraFeed
+  }))), /*#__PURE__*/React__default['default'].createElement(CaptureContainer, {
+    className: classNames.captureContainer
+  }, /*#__PURE__*/React__default['default'].createElement(HeadingRow, {
+    "$maskColor": maskColor,
+    className: classNames.headingRow
+  }, /*#__PURE__*/React__default['default'].createElement(Heading, {
+    className: classNames.heading
+  }, "Comprobante de domicilio")), /*#__PURE__*/React__default['default'].createElement(DocumentCaptureGuideOverlay, {
     aspectRatio: aspectRatio,
     classNames: classNames,
     maskColor: maskColor
   }), /*#__PURE__*/React__default['default'].createElement(FooterRow, {
-    "$maskColor": maskColor
-  }, instructions && /*#__PURE__*/React__default['default'].createElement(Instructions, null, instructions), /*#__PURE__*/React__default['default'].createElement(StyledButtonsRow, null, cameraAccessDenied ? ( /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
+    "$maskColor": maskColor,
+    className: classNames.footerRow
+  }, instructions && ( /*#__PURE__*/React__default['default'].createElement(Instructions, {
+    className: classNames.instructions
+  }, instructions)), /*#__PURE__*/React__default['default'].createElement(StyledButtonsRow, {
+    className: classNames.buttonsRow
+  }, cameraAccessDenied ? ( /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
+    className: classNames.retryCameraAccessBtn,
     variant: "negative",
     finished: true,
     onClick: retryCameraAccess
   }, "Retry camera access")) : imageUrl ? ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, uploadState === 'not_started' ? ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
+    className: classNames.retryCaptureBtn,
     finished: true,
     variant: "warning",
     onClick: function onClick() {
@@ -17089,14 +17099,17 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
       });
     }
   }, "Retry Capture"), /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
+    className: classNames.uploadBtn,
     finished: true,
     variant: "positive",
     onClick: onSubmitClick
   }, "Upload"))) : ( /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
+    className: classNames.uploadProgressBtn,
     finished: uploadState !== 'in_progress',
     variant: uploadState === 'failed' ? 'negative' : 'positive',
     onClick: onSubmitClick
   }, uploadState === 'succeeded' ? 'Upload Succeeded!' : uploadState === 'failed' ? 'Retry Upload' : 'Uploading...')))) : ( /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
+    className: classNames.captureBtn,
     finished: cameraReady,
     variant: "primary",
     onClick: onCaptureClick,
@@ -17116,7 +17129,8 @@ var Instructions = styled__default['default'].div(templateObject_5 || (templateO
   return (_c = (_b = (_a = props.theme.documentCapture) === null || _a === void 0 ? void 0 : _a.instructions) === null || _b === void 0 ? void 0 : _b.maxHeight) !== null && _c !== void 0 ? _c : '8rem';
 });
 var StyledButtonsRow = styled__default['default'](ButtonsRow)(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n  padding-top: 20px;\n"], ["\n  padding-top: 20px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var PreviewImage = styled__default['default'].img(templateObject_7 || (templateObject_7 = tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
 var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
   var onSuccess = _a.onSuccess,