feat: emit 'open' event if visual challenge appears (#49)

* feat: emit 'open' event if visual challenge appears

* docs: add 'open' event description

* fix: update jest snapshots

* chore: update console.log message on 'open ' in Example.App.js

Co-authored-by: e271828- <e271828-@users.noreply.github.com>

* Apply suggestions from code review

---------

Co-authored-by: e271828- <e271828-@users.noreply.github.com>

Author: CAMOBAP

Example.App.js

@@ -18,6 +18,8 @@ export default class App extends React.Component {
       } else if (['error', 'expired'].includes(event.nativeEvent.data)) {
         this.captchaForm.hide();
         this.setState({ code: event.nativeEvent.data});
+      } else if (event.nativeEvent.data === 'open') {
+        console.log('Visual challenge opened');
       } else {
         console.log('Verified code from hCaptcha', event.nativeEvent.data);
         this.captchaForm.hide();

Hcaptcha.js

@@ -145,8 +145,7 @@ const Hcaptcha = ({
             window.ReactNativeWebView.postMessage("cancel");
           };
           var onOpen = function() {
-            // NOTE: disabled for simplicity.
-            // window.ReactNativeWebView.postMessage("open");
+            window.ReactNativeWebView.postMessage("open");
             console.log("challenge opened");
           };
           var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); };

README.md

@@ -38,6 +38,7 @@ Also, please note the following special message strings that can be returned via
 | expired | passcode response expired and the user must re-verify |
 | error | there was an error displaying the challenge |
 | cancel | the user closed the challenge, or did not answer before session expired |
+| open | the visual challenge was opened |
 
 
 Any other string returned by `onMessage` will be a passcode.

__tests__/__snapshots__/ConfirmHcaptcha.test.js.snap

@@ -99,8 +99,7 @@ exports[`ConfirmHcaptcha snapshot tests renders ConfirmHcaptcha with all props 1
             window.ReactNativeWebView.postMessage(\\"cancel\\");
           };
           var onOpen = function() {
-            // NOTE: disabled for simplicity.
-            // window.ReactNativeWebView.postMessage(\\"open\\");
+            window.ReactNativeWebView.postMessage(\\"open\\");
             console.log(\\"challenge opened\\");
           };
           var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage(\\"expired\\"); };
@@ -255,8 +254,7 @@ exports[`ConfirmHcaptcha snapshot tests renders ConfirmHcaptcha with minimum pro
             window.ReactNativeWebView.postMessage(\\"cancel\\");
           };
           var onOpen = function() {
-            // NOTE: disabled for simplicity.
-            // window.ReactNativeWebView.postMessage(\\"open\\");
+            window.ReactNativeWebView.postMessage(\\"open\\");
             console.log(\\"challenge opened\\");
           };
           var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage(\\"expired\\"); };

__tests__/__snapshots__/Hcaptcha.test.js.snap

@@ -61,8 +61,7 @@ exports[`Hcaptcha snapshot tests renders Hcaptcha with all props 1`] = `
             window.ReactNativeWebView.postMessage(\\"cancel\\");
           };
           var onOpen = function() {
-            // NOTE: disabled for simplicity.
-            // window.ReactNativeWebView.postMessage(\\"open\\");
+            window.ReactNativeWebView.postMessage(\\"open\\");
             console.log(\\"challenge opened\\");
           };
           var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage(\\"expired\\"); };
@@ -177,8 +176,7 @@ exports[`Hcaptcha snapshot tests renders Hcaptcha with minimum props 1`] = `
             window.ReactNativeWebView.postMessage(\\"cancel\\");
           };
           var onOpen = function() {
-            // NOTE: disabled for simplicity.
-            // window.ReactNativeWebView.postMessage(\\"open\\");
+            window.ReactNativeWebView.postMessage(\\"open\\");
             console.log(\\"challenge opened\\");
           };
           var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage(\\"expired\\"); };