idmission-web-sdk 0.0.41 → 0.0.43

package/README.md

@@ -180,6 +180,10 @@ Render a fullscreen capture component that analyzes frames from the user's front
 <table>
 <tr><td><code>guidesUnsatisfiedColor</code></td><td>Default: white</td></tr>
 <tr><td><code>guidesSatisfiedColor</code></td><td>Default: green</td></tr>
+<tr><td><code>guidanceMessagesSatisfiedBackgroundColor</code></td><td>Default: green</td></tr>
+<tr><td><code>guidanceMessagesUnsatisfiedBackgroundColor</code></td><td>Default: red</td></tr>
+<tr><td><code>guidanceMessagesSatisfiedTextColor</code></td><td>Default: black</td></tr>
+<tr><td><code>guidanceMessagesUnsatisfiedTextColor</code></td><td>Default: black</td></tr>
 </table>
 
 **Face Liveness Verbiage**
@@ -452,6 +456,10 @@ Render a fullscreen capture component that analyzes frames from the user's front
 <table>
 <tr><td><code>guidesUnsatisfiedColor</code></td><td>Default: white</td></tr>
 <tr><td><code>guidesSatisfiedColor</code></td><td>Default: green</td></tr>
+<tr><td><code>guidanceMessagesSatisfiedBackgroundColor</code></td><td>Default: green</td></tr>
+<tr><td><code>guidanceMessagesUnsatisfiedBackgroundColor</code></td><td>Default: red</td></tr>
+<tr><td><code>guidanceMessagesSatisfiedTextColor</code></td><td>Default: black</td></tr>
+<tr><td><code>guidanceMessagesUnsatisfiedTextColor</code></td><td>Default: black</td></tr>
 </table>
 
 **Customer Identification Verbiage**

package/dist/components/customer_flows/SignatureKYC.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { LangOption } from '../../lib/locales';
 import { SubmissionEnvironment, SubmissionRequest, SubmissionResponse } from '../../contexts/SubmissionContext';
+import { SignatureKYCColors, SignatureKYCVerbiage } from '../signature_kyc/SignatureKYCWizard';
 export type SignatureKYCProps = {
     lang?: LangOption;
     submissionToken: string;
@@ -8,8 +9,10 @@ export type SignatureKYCProps = {
     submissionUrl?: string;
     onBeforeSubmit?: (request: SubmissionRequest) => Promise<SubmissionRequest>;
     onComplete?: (submissionResponse: SubmissionResponse) => void;
+    colors?: SignatureKYCColors;
+    verbiage?: SignatureKYCVerbiage;
     geolocationEnabled?: boolean;
     geolocationRequired?: boolean;
     debugMode?: boolean;
 };
-export declare const SignatureKYC: ({ submissionToken, submissionEnvironment, submissionUrl, onBeforeSubmit, onComplete, geolocationEnabled, geolocationRequired, debugMode, }: SignatureKYCProps) => ReactElement;
+export declare const SignatureKYC: ({ submissionToken, submissionEnvironment, submissionUrl, onBeforeSubmit, onComplete, colors, verbiage, geolocationEnabled, geolocationRequired, debugMode, }: SignatureKYCProps) => ReactElement;

package/dist/components/selfie_capture/SelfieCapture.d.ts

@@ -3,6 +3,10 @@ import { Face } from './HighPerformanceSelfieGuidanceModelsProvider';
 export type SelfieCaptureColors = {
     guidesUnsatisfiedColor?: string;
     guidesSatisfiedColor?: string;
+    guidanceMessagesSatisfiedBackgroundColor?: string;
+    guidanceMessagesUnsatisfiedBackgroundColor?: string;
+    guidanceMessagesSatisfiedTextColor?: string;
+    guidanceMessagesUnsatisfiedTextColor?: string;
 };
 export type SelfieCaptureVerbiage = {
     guidanceHoldStillText?: string;

package/dist/components/signature_capture/VideoSignatureCapture.d.ts

@@ -1,11 +1,19 @@
 import React from 'react';
 import { SignatureData } from './data';
 import { SignatureCaptureVerbiage } from './SignatureCapture';
+export type VideoSignatureCaptureColors = {
+    guidanceMessageBackgroundColor?: string;
+    guidanceMessageTextColor?: string;
+};
+export type VideoSignatureCaptureVerbiage = SignatureCaptureVerbiage & {
+    guidanceMessageText?: string;
+};
 export type VideoSignatureCaptureProps = {
     onComplete?: (signatureData: SignatureData, imageData: string, videoData: Blob) => void;
     onFaceNotDetected?: () => void;
     onExit?: () => void;
-    verbiage?: SignatureCaptureVerbiage;
+    colors?: VideoSignatureCaptureColors;
+    verbiage?: VideoSignatureCaptureVerbiage;
     debugMode?: boolean;
 };
-export declare const VideoSignatureCapture: ({ onComplete, onFaceNotDetected, onExit, verbiage, debugMode, }: VideoSignatureCaptureProps) => React.ReactElement;
+export declare const VideoSignatureCapture: ({ onComplete, onFaceNotDetected, onExit, colors, verbiage, debugMode, }: VideoSignatureCaptureProps) => React.ReactElement;

package/dist/components/signature_kyc/SignatureKYCWizard.d.ts

@@ -1,7 +1,24 @@
 import { ReactElement } from 'react';
+import { VideoSignatureCaptureColors, VideoSignatureCaptureVerbiage } from '../signature_capture/VideoSignatureCapture';
+import { FaceLivenessColors, FaceLivenessVerbiage } from '../face_liveness/FaceLivenessWizard';
+export type SignatureKYCColors = {
+    faceLiveness?: FaceLivenessColors;
+    videoSignatureCapture?: VideoSignatureCaptureColors;
+};
+export type SignatureKYCVerbiage = {
+    faceLiveness?: FaceLivenessVerbiage;
+    videoSignatureCapture?: VideoSignatureCaptureVerbiage;
+    success?: {
+        headingText?: string;
+        retryBtnText?: string;
+        doneBtnText?: string;
+    };
+};
 export type SignatureKYCWizardProps = {
     onComplete?: () => void;
     onRetryClicked?: () => void;
+    colors?: SignatureKYCColors;
+    verbiage?: SignatureKYCVerbiage;
     debugMode?: boolean;
 };
-export declare const SignatureKYCWizard: ({ onComplete, onRetryClicked, debugMode, }: SignatureKYCWizardProps) => ReactElement;
+export declare const SignatureKYCWizard: ({ onComplete, onRetryClicked, colors, verbiage, debugMode, }: SignatureKYCWizardProps) => ReactElement;

package/dist/sdk2.cjs.development.js

@@ -10172,6 +10172,10 @@ var SelfieCapture = function SelfieCapture(_a) {
   });
   colors.guidesUnsatisfiedColor || (colors.guidesUnsatisfiedColor = 'white');
   colors.guidesSatisfiedColor || (colors.guidesSatisfiedColor = 'green');
+  colors.guidanceMessagesUnsatisfiedBackgroundColor || (colors.guidanceMessagesUnsatisfiedBackgroundColor = 'red');
+  colors.guidanceMessagesSatisfiedBackgroundColor || (colors.guidanceMessagesSatisfiedBackgroundColor = 'green');
+  colors.guidanceMessagesUnsatisfiedTextColor || (colors.guidanceMessagesUnsatisfiedTextColor = 'black');
+  colors.guidanceMessagesSatisfiedTextColor || (colors.guidanceMessagesSatisfiedTextColor = 'black');
   if (!guidanceMessage) {
     verbiage.guidanceHoldStillText || (verbiage.guidanceHoldStillText = t('Hold still for a few seconds...'));
     verbiage.guidanceLookStraightText || (verbiage.guidanceLookStraightText = t('Look straight into the camera...'));
@@ -10186,8 +10190,8 @@ var SelfieCapture = function SelfieCapture(_a) {
   }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null), /*#__PURE__*/React__default['default'].createElement(FaceCaptureGuideOverlay, {
     borderColor: state.faceReady ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
   }), guidanceMessage !== '' && /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, null, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, {
-    "$background": state.faceReady ? 'green' : 'red',
-    "$textColor": "white"
+    "$background": state.faceReady ? colors.guidanceMessagesSatisfiedBackgroundColor : colors.guidanceMessagesUnsatisfiedBackgroundColor,
+    "$textColor": state.faceReady ? colors.guidanceMessagesSatisfiedTextColor : colors.guidanceMessagesUnsatisfiedTextColor
   }, guidanceMessage)), debugMode && state.faces.length > 0 && /*#__PURE__*/React__default['default'].createElement(ObjectDetectionDebugOverlay, {
     "$flipX": !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing)
   }, state.faces.map(function (face, i) {
@@ -11426,39 +11430,44 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   var onComplete = _a.onComplete,
     onFaceNotDetected = _a.onFaceNotDetected,
     onExit = _a.onExit,
-    _d = _a.verbiage,
-    verbiage = _d === void 0 ? {} : _d,
-    _e = _a.debugMode,
-    debugMode = _e === void 0 ? false : _e;
+    _d = _a.colors,
+    colors = _d === void 0 ? {} : _d,
+    _e = _a.verbiage,
+    verbiage = _e === void 0 ? {} : _e,
+    _f = _a.debugMode,
+    debugMode = _f === void 0 ? false : _f;
   var t = reactI18next.useTranslation().t;
-  var _f = React.useContext(CameraStateContext),
-    cameraRef = _f.cameraRef,
-    videoRef = _f.videoRef;
-  var _g = useResizeObserver__default['default'](),
-    ref = _g.ref,
-    width = _g.width,
-    height = _g.height;
+  var _g = React.useContext(CameraStateContext),
+    cameraRef = _g.cameraRef,
+    videoRef = _g.videoRef;
+  var _h = useResizeObserver__default['default'](),
+    ref = _h.ref,
+    width = _h.width,
+    height = _h.height;
   var signaturePad = React.useRef(null);
   var signatureRecorder = React.useRef(null);
   var recordedChunks = React.useRef([]);
-  var _h = React.useState(null),
-    signatureVideoUrl = _h[0],
-    setSignatureVideoUrl = _h[1];
+  var _j = React.useState(null),
+    signatureVideoUrl = _j[0],
+    setSignatureVideoUrl = _j[1];
   var onPredictionMade = React.useContext(HighPerformanceSelfieGuidanceModelsContext).onPredictionMade;
-  var _j = useVideoRecorder(cameraRef.current),
-    isRecording = _j.isRecording,
-    startRecording = _j.startRecording,
-    stopRecording = _j.stopRecording,
-    videoUrl = _j.videoUrl;
-  var _k = React.useState(null),
-    signatureData = _k[0],
-    setSignatureData = _k[1];
+  var _k = useVideoRecorder(cameraRef.current),
+    isRecording = _k.isRecording,
+    startRecording = _k.startRecording,
+    stopRecording = _k.stopRecording,
+    videoUrl = _k.videoUrl;
   var _l = React.useState(null),
-    signatureDataUrl = _l[0],
-    setSignatureDataUrl = _l[1];
+    signatureData = _l[0],
+    setSignatureData = _l[1];
   var _m = React.useState(null),
-    signatureVideoData = _m[0],
-    setSignatureVideoData = _m[1];
+    signatureDataUrl = _m[0],
+    setSignatureDataUrl = _m[1];
+  var _o = React.useState(null),
+    signatureVideoData = _o[0],
+    setSignatureVideoData = _o[1];
+  colors.guidanceMessageBackgroundColor || (colors.guidanceMessageBackgroundColor = '#ccc');
+  colors.guidanceMessageTextColor || (colors.guidanceMessageTextColor = 'black');
+  verbiage.guidanceMessageText || (verbiage.guidanceMessageText = t('Please sign the box below'));
   verbiage.acceptBtnText || (verbiage.acceptBtnText = t('Accept'));
   verbiage.clearBtnText || (verbiage.clearBtnText = t('Clear'));
   var outputCanvas = React.useRef(null);
@@ -11530,9 +11539,9 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
       cancelAnimationFrame(animationFrame.current);
     };
   }, [cameraRef, isRecording, onFaceNotDetected, videoRef]);
-  var _o = React.useState(0),
-    numFramesWithoutFaces = _o[0],
-    setNumFramesWithoutFaces = _o[1];
+  var _p = React.useState(0),
+    numFramesWithoutFaces = _p[0],
+    setNumFramesWithoutFaces = _p[1];
   React.useEffect(function () {
     onPredictionMade(function (faces) {
       setNumFramesWithoutFaces(function (n) {
@@ -11562,12 +11571,14 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
       value: JSON.stringify(signatureData, null, 2)
     }));
   }
-  var guidanceMessage = t('Please sign the box below');
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     className: "flex"
-  }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null), guidanceMessage !== '' && /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, {
+  }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null), verbiage.guidanceMessageText && /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, {
     "$top": "5vh"
-  }, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, null, guidanceMessage)), /*#__PURE__*/React__default['default'].createElement(SignatureCanvasContainer, null, /*#__PURE__*/React__default['default'].createElement(SignaturePad, {
+  }, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, {
+    "$background": colors.guidanceMessageBackgroundColor,
+    "$textColor": colors.guidanceMessageTextColor
+  }, verbiage.guidanceMessageText)), /*#__PURE__*/React__default['default'].createElement(SignatureCanvasContainer, null, /*#__PURE__*/React__default['default'].createElement(SignaturePad, {
     ref: ref
   }, /*#__PURE__*/React__default['default'].createElement(SignatureCanvas__default['default'], {
     ref: signaturePad,
@@ -11669,19 +11680,23 @@ var templateObject_1;
 var SignatureKYCWizard = function SignatureKYCWizard(_a) {
   var onComplete = _a.onComplete,
     onRetryClicked = _a.onRetryClicked,
-    _b = _a.debugMode,
-    debugMode = _b === void 0 ? false : _b;
-  var _c = React.useContext(SubmissionContext),
-    submit = _c.submit,
-    selfieImage = _c.selfieImage,
-    signatureVideo = _c.signatureVideo,
-    setSelfieImage = _c.setSelfieImage,
-    setSignatureData = _c.setSignatureData,
-    setSignatureVideo = _c.setSignatureVideo,
-    logSelfieCaptureAttempt = _c.logSelfieCaptureAttempt;
-  var _d = React.useState('LOADING'),
-    captureState = _d[0],
-    setCaptureState = _d[1];
+    _b = _a.colors,
+    colors = _b === void 0 ? {} : _b,
+    _c = _a.verbiage,
+    verbiage = _c === void 0 ? {} : _c,
+    _d = _a.debugMode,
+    debugMode = _d === void 0 ? false : _d;
+  var _e = React.useContext(SubmissionContext),
+    submit = _e.submit,
+    selfieImage = _e.selfieImage,
+    signatureVideo = _e.signatureVideo,
+    setSelfieImage = _e.setSelfieImage,
+    setSignatureData = _e.setSignatureData,
+    setSignatureVideo = _e.setSignatureVideo,
+    logSelfieCaptureAttempt = _e.logSelfieCaptureAttempt;
+  var _f = React.useState('LOADING'),
+    captureState = _f[0],
+    setCaptureState = _f[1];
   var operationStartedAt = React.useRef();
   var captureStartedAt = React.useRef();
   var captureEndedAt = React.useRef();
@@ -11730,13 +11745,13 @@ var SignatureKYCWizard = function SignatureKYCWizard(_a) {
     setSignatureVideo(URL.createObjectURL(videoData));
     setCaptureState('SUCCESS');
     onComplete === null || onComplete === void 0 ? void 0 : onComplete();
-  }, [onComplete, setSignatureData]);
+  }, [onComplete, setSignatureData, setSignatureVideo]);
   var onSignatureCaptureFacesNotDetected = React.useCallback(function () {
     setCaptureState('CHECKING_LIVENESS');
   }, []);
-  var _e = React.useState(0),
-    attempt = _e[0],
-    setAttempt = _e[1];
+  var _g = React.useState(0),
+    attempt = _g[0],
+    setAttempt = _g[1];
   var onExit = React.useCallback(function () {
     setAttempt(function (n) {
       return n + 1;
@@ -11746,11 +11761,14 @@ var SignatureKYCWizard = function SignatureKYCWizard(_a) {
   return /*#__PURE__*/React__default['default'].createElement(HighPerformanceSelfieGuidanceModelsProvider, {
     throttleMs: captureState === 'CAPTURING_SIGNATURE' ? 250 : 0
   }, captureState !== 'LOADING' && function () {
+    var _a, _b, _c;
     switch (captureState) {
       case 'CHECKING_LIVENESS':
         return /*#__PURE__*/React__default['default'].createElement(FaceLivenessCapture, {
           onSuccess: onFaceCaptureSuccess,
           onExit: onExit,
+          colors: colors.faceLiveness,
+          verbiage: verbiage.faceLiveness,
           debugMode: debugMode
         });
       case 'CAPTURING_SIGNATURE':
@@ -11758,13 +11776,18 @@ var SignatureKYCWizard = function SignatureKYCWizard(_a) {
           onComplete: onSignatureCaptureCompleted,
           onFaceNotDetected: onSignatureCaptureFacesNotDetected,
           onExit: onExit,
+          colors: colors.videoSignatureCapture,
+          verbiage: verbiage.videoSignatureCapture,
           debugMode: debugMode
         });
       case 'SUCCESS':
         return /*#__PURE__*/React__default['default'].createElement(SignatureKYCSuccess, {
           videoUrl: signatureVideo !== null && signatureVideo !== void 0 ? signatureVideo : '',
           onDoneClick: submit,
-          onRetryClick: onRetryClicked
+          onRetryClick: onRetryClicked,
+          headingText: (_a = verbiage.success) === null || _a === void 0 ? void 0 : _a.headingText,
+          retryBtnText: (_b = verbiage.success) === null || _b === void 0 ? void 0 : _b.retryBtnText,
+          doneBtnText: (_c = verbiage.success) === null || _c === void 0 ? void 0 : _c.doneBtnText
         });
       default:
         return null;
@@ -13473,6 +13496,8 @@ var SignatureKYC = function SignatureKYC(_a) {
     submissionUrl = _a.submissionUrl,
     onBeforeSubmit = _a.onBeforeSubmit,
     onComplete = _a.onComplete,
+    colors = _a.colors,
+    verbiage = _a.verbiage,
     geolocationEnabled = _a.geolocationEnabled,
     geolocationRequired = _a.geolocationRequired,
     debugMode = _a.debugMode;
@@ -13494,7 +13519,9 @@ var SignatureKYC = function SignatureKYC(_a) {
     preferFrontFacingCamera: true,
     requestMicrophoneAccess: true
   }, /*#__PURE__*/React__default['default'].createElement(SignatureKYCWizard, {
+    colors: colors,
     debugMode: debugMode,
+    verbiage: verbiage,
     onRetryClicked: function onRetryClicked() {
       setAttempt(function (n) {
         return n + 1;